这个菜单组件 一般可以直接用到项目里 如果复用性不强的话 直接使用
但是有一个问题 如果很多地方都需要用到这个组件
我们可以把这个组件二次封装一下
<template>
<div class="cinema-search-filter-component">
<nut-menu>
<template #icon>
<TriangleDown size="12" />
</template>
<nut-menu-item
v-model="searchFilter.regionValue"
:title="currentRegionTitle"
:options="searchFilter.region"
/>
<nut-menu-item
v-model="searchFilter.brandValue"
:title="currentBrandTitle"
:options="searchFilter.brand"
/>
</nut-menu>
</div>
</template>
<script setup lang="ts">
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 lang="scss">
.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>
基本上就是这样的
