51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<template>
|
|
<div class="manage-btn">
|
|
<div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(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,
|
|
},
|
|
})
|
|
const emit = defineEmits(["update:modelValue", "select"]);
|
|
const btnList = ref([
|
|
{
|
|
icon: 'sp_icon_zdgl.png',
|
|
name: '站点管理'
|
|
},
|
|
{
|
|
icon: 'sp_icon_sdgl.png',
|
|
name: '隧道管理'
|
|
},
|
|
{
|
|
icon: 'sp_icon_yhgl.png',
|
|
name: '用户管理'
|
|
},
|
|
{
|
|
icon: 'sp_icon_xtgl.png',
|
|
name: '系统管理'
|
|
},
|
|
// {
|
|
// icon: 'sp_icon_mngl.png',
|
|
// name: '模拟仿真'
|
|
// },
|
|
])
|
|
const selectButton = ref(props.modelValue);
|
|
const getImageUrl = (name) => {
|
|
return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
|
|
}
|
|
const select = (index) => {
|
|
if (selectButton.value === index) return;
|
|
selectButton.value = index;
|
|
emit("update:modelValue", index);
|
|
emit("select", index);
|
|
};
|
|
</script>
|