今天去面试,面试官们给我一个‘选择’,有四个选项:‘展示你的才华’、‘展示你的美貌’、‘展示你的才华与美貌’、‘都不展示’
{
label: “选择”,
children: [
{
label: “展示你的才华”,
children: [],
isShow: talentModal,
click: () => {
isShowTalent();
}
},
{
label: “展示你的美貌”,
children: [],
isShow: beautyModal,
click: () => {
isShowBeauty();
}
},
{
label: “展示你的才华与美貌”,
children: [],
isShow: talentAndBeautyModal,
click: () => {
isShowTalentAndBeauty();
}
},
{
label: “都不展示”,
children: [],
isShow: nullModal,
click: () => {
isNotShow();
}
},
]
}
场景一:
面试官一说,‘我的时间很宝贵,你只能四选一来展示’
//控制才华是否显示
const talentModal = ref(false);
function isShowTalent() {
if (某些条件前提) {
talentModal.value = !talentModal.value;
if (talentModal.value) {
beautyModal.value = false;
talentAndBeautyModal.value = false;
nullModal.value = false;
//显示才华的方法
showTalent();
} else {
//隐藏才华的方法
hideTalent();
nullModal.value = true;
}
}
}
//控制美貌是否显示
const beautyModal = ref(false);
function isShowBeauty() {
if (某些条件前提) {
beautyModal.value = !beautyModal.value;
if (beautyModal.value) {
talentModal.value = false;
talentAndBeautyModal.value = false;
nullModal.value = false;
//显示美貌
showBeauty();
} else {
//隐藏美貌
hideBeauty();
nullModal.value = true;
}
}
}
//控制才华与美貌是否显示
const talentAndBeautyModal= ref(true);
function isShowTalentAndBeauty() {
if (某些条件前提) {
talentAndBeautyModal.value = !talentAndBeautyModal.value;
if (talentAndBeautyModal.value){
talentModal.value = false;
beautyModal.value = false;
nullModal.value = false;
showTalentAndBeauty();
}else {
hideTalentAndBeauty();
nullModal.value = true;
}
}
}
//控制才华与美貌是否不显示
const nullModal = ref(false);
function isNotShow() {
if (某些条件前提) {
nullModal.value = !nullModal.value;
if (!nullModal.value){
showNull();
talentAndBeautyModal.value = true;
}else {
hideNull();
talentModal.value = false;
beautyModal.value = false;
talentAndBeautyModal.value = false;
}
}
}
场景二:
面试官二说,‘少管他,这四选项你主要是展示出它们之间的关联关系’
const talentModal = ref(true);
function isShowTalent() {
if (某些条件前提) {
talentModal.value = !talentModal.value;
if (talentModal.value) {
showTalent();
nullModal.value = false;
} else {
hideTalent();
talentAndBeautyModal.value = false;
}
if (talentModal.value) {
beautyModal.value = true;
nullModal.value = false;
}
if (beautyModal.value && talentModal.value) {
talentAndBeautyModal.value = true;
}
if (!beautyModal.value && !talentModal.value) {
nullModal.value = true;
}
}
}
const beautyModal = ref(true);
function isShowBeauty() {
if (某些条件前提) {
beautyModal.value = !beautyModal.value;
if (beautyModal.value) {
showBeauty();
nullModal.value = false;
} else {
hideBeauty();
talentAndBeautyModal.value = false;
}
if (talentModal.value) {
showTalent();
nullModal.value = false;
}
if (beautyModal.value && talentModal.value) {
talentAndBeautyModal.value = true;
}
if (!beautyModal.value && !talentModal.value) {
nullModal.value = true;
}
}
}
const talentAndBeautyModal= ref(true);
function isShowTalentAndBeauty() {
if (某些条件前提) {
talentAndBeautyModal.value = !talentAndBeautyModal;
if (talentAndBeautyModal.value = false) {
talentModal.value = false;
beautyModal.value = false;
nullModal.value = false;
}
isShowTalent();
isShowBeauty();
if (beautyModal.value && talentModal.value) {
talentAndBeautyModal.value = true;
}
}
}
const nullModal = ref(false);
function isNotShow() {
if (某些条件前提) {
nullModal.value = !nullModal.value;
if (nullModal.value) {
talentAndBeautyModal.value = false;
isShowTalentAndBeauty();
} else {
talentAndBeautyModal.value = true;
isShowTalentAndBeauty();
}
}
}
描述:
通过isShow的值判断是否勾选;默认一开始勾选‘展示才华与美貌’;
(‘展示你的才华’、‘展示你的美貌’、‘展示你的才华与美貌’、‘都不展示’)
场景一:默认勾选‘展示才华与美貌’,但是‘展示你的才华’与‘展示你的美貌’都不在勾选状态;取消‘展示你的才华’或‘展示你的美貌’或‘展示你的才华与美貌’后,则‘都不展示’勾选;只能有一个被勾选;
场景二:默认勾选‘展示才华与美貌’,意味着‘展示你的才华’与‘展示你的美貌’也是在勾选状态;取消任意一个后,‘展示才华与美貌’不是勾选状态;如果‘展示才华与美貌’不是勾选状态,且其他两个都不是勾选状态,则‘都不展示’勾选;