title 芜湖网站制作,怎样备份网站数据库,百度知道问答,济南网站建设专业这个菜单组件 一般可以直接用到项目里 如果复用性不强的话 直接使用 但是有一个问题 如果很多地方都需要用到这个组件
我们可以把这个组件二次封装一下 templatediv classcinema-search-filter-componentnut-menutemplate #icontemplatediv classcinema-search-filter-componentnut-menutemplate #iconTriangleDown size12 //templatenut-menu-itemv-modelsearchFilter.regionValue:titlecurrentRegionTitle:optionssearchFilter.region/nut-menu-itemv-modelsearchFilter.brandValue:titlecurrentBrandTitle:optionssearchFilter.brand//nut-menu/div
/template
script setup langts
import { ref, reactive, computed, onMounted, watch } from vue;
import { useLocationStore } from ../../store;
import { TriangleDown } from nutui/icons-vue-taro;
const locationStore useLocationStore();
let searchFilter ref({region: [{ text: 全部, title: 全城, value: 0 }],brand: [{ text: 全部, title: 品牌, value: 0 }],regionValue: 0,brandValue: 0,
});
onMounted(() {getRegionData();
});
const emit defineEmits([onRegionChanged, onBrandChanged]);
watch(() searchFilter.value.regionValue,(newVal) {emit(onRegionChanged, newVal);}
);
watch(() searchFilter.value.brandValue,(newVal) {emit(onBrandChanged, newVal);}
);
watch(() locationStore.selectCityinfo,(newVal) {getRegionData();}
);
const currentRegionTitle computed(() {const arr searchFilter.value.region;const value searchFilter.value.regionValue;return arr.find((item) {return item.value value;})?.title;
});
const currentBrandTitle computed(() {const arr searchFilter.value.brand;const value searchFilter.value.brandValue;return arr.find((item) {return item.value value;})?.title;
});
const getRegionData async () {initData();// const cityId locationStore.selectCityinfo.cityId;// const res: any await cityApi.region(cityId);// const arr searchFilter.value.region;// res.forEach((item) {// arr.push({// text: item.regionname,// title: item.regionname,// value: item.regionid,// });// });// searchFilter.value.region arr;
};
const initData () {searchFilter.value {region: [{ text: 全部, title: 全城, value: 0 }],brand: [{ text: 全部, title: 品牌, value: 0 }],regionValue: 0,brandValue: 0,};
};
/script
style langscss
.cinema-search-filter-component {display: flex;flex-direction: column;// background: #fff;.nut-menu .nut-menu__bar {box-shadow: none !important;}.nut-menu__title-text {font-size: 24px;}.nut-menu__bar {background: none !important;}
}
/style基本上就是这样的
