今天去面試,面試官們給我一個‘選擇’,有四個選項:‘展示你的才華’、‘展示你的美貌’、‘展示你的才華與美貌’、‘都不展示’
{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的值判斷是否勾選;默認一開始勾選‘展示才華與美貌’;
(‘展示你的才華’、‘展示你的美貌’、‘展示你的才華與美貌’、‘都不展示’)
場景一:默認勾選‘展示才華與美貌’,但是‘展示你的才華’與‘展示你的美貌’都不在勾選狀態;取消‘展示你的才華’或‘展示你的美貌’或‘展示你的才華與美貌’后,則‘都不展示’勾選;只能有一個被勾選;
場景二:默認勾選‘展示才華與美貌’,意味著‘展示你的才華’與‘展示你的美貌’也是在勾選狀態;取消任意一個后,‘展示才華與美貌’不是勾選狀態;如果‘展示才華與美貌’不是勾選狀態,且其他兩個都不是勾選狀態,則‘都不展示’勾選;