72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<div class="manage-btn">
|
|
<div v-for="(item,index) in list" :key="item.name" class="btn-box" @click="select(item,index)">
|
|
<div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
|
|
<div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
})
|
|
// watch(() => props.list, (now) => {
|
|
// let newArr=[]
|
|
// btnList.value.forEach((btnList) => {
|
|
// now.forEach((item) => {
|
|
// if (btnList.route==item) {
|
|
// newArr.push(btnList)
|
|
// }
|
|
// })
|
|
// })
|
|
// btnList.value=newArr
|
|
// }, {deep: true});
|
|
const emit = defineEmits(["update:modelValue", "select"]);
|
|
const btnList = ref([
|
|
{
|
|
route: '/site',
|
|
icon: 'sp_icon_zdgl.png',
|
|
name: '站点管理'
|
|
},
|
|
{
|
|
route: '/tunnel',
|
|
icon: 'sp_icon_sdgl.png',
|
|
name: '隧道管理'
|
|
},
|
|
{
|
|
route: '/user',
|
|
icon: 'sp_icon_yhgl.png',
|
|
name: '用户管理'
|
|
},
|
|
// {
|
|
// route: '/system',
|
|
// icon: 'sp_icon_xtgl.png',
|
|
// name: '系统管理'
|
|
// },
|
|
{
|
|
route: '/simulate',
|
|
icon: 'sp_icon_mngl.png',
|
|
name: '模拟仿真'
|
|
},
|
|
])
|
|
const newList=ref([])
|
|
const selectButton = ref(props.modelValue);
|
|
const getImageUrl = (name) => {
|
|
return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
|
|
}
|
|
const select = (item,index) => {
|
|
if (selectButton.value === index) return;
|
|
selectButton.value = index;
|
|
emit("update:modelValue", index);
|
|
emit("select", item.name);
|
|
};
|
|
</script>
|