<template>
|
<div class="tabsBox">
|
<div @click="setPageToStop('Top')"><el-button class="tabsTitle" type="text">On This Page</el-button></div>
|
<div class="tabsContent">
|
<ul>
|
<li :class="{ 'tabsLi': activeName === res.name }" @click="handleClick(res.name)"
|
v-for="(res, index) in tabsOption">
|
{{ res.name }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, nextTick ,watch} from 'vue';
|
import useStore from '../../store/defineStore.ts';
|
import type { TabsPaneContext } from 'element-plus'
|
const tabPosition = ref('right')
|
const activeName = ref(null)
|
const store = useStore()
|
const handleClick = (res) => {
|
|
if (res) {
|
setPageToStop(res);
|
activeName.value = res;
|
}
|
}
|
const setPageToStop = (res) => {
|
store.$patch((state) => {
|
state.setListFlag = res;
|
|
})
|
};
|
const tabsOption = ref([]);
|
|
const setTabsStart = () => {
|
const std = [];
|
for (var i in listMenu) {
|
std.push({
|
name: listMenu[i].name
|
})
|
}
|
if (std.length <= 0) return
|
tabsOption.value = std;
|
activeName.value = std[0].name
|
}
|
onMounted(() => {
|
setTabsStart();
|
|
})
|
|
watch(() => store.$state.setListIndex, (newValue, oldValue) => {
|
if (newValue) {
|
|
activeName.value = tabsOption.value[newValue.val].name;
|
nextTick(() => {
|
store.$state.setListIndex = null;
|
})
|
}
|
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.tabsBox {
|
width: 20%;
|
height: 99%;
|
padding-top: 1%;
|
|
.tabsTitle {
|
font-size: 14px;
|
|
line-height: 20px;
|
padding-left: 20px;
|
font-weight: bold;
|
|
color: black
|
}
|
|
.tabsContent {
|
|
padding-left: 20px;
|
cursor: pointer;
|
|
ul {
|
margin: 0px;
|
list-style: none;
|
padding-left: 0px;
|
|
li {
|
line-height: 35px;
|
font-size: 14px;
|
padding-left: 10px;
|
}
|
|
li:hover {
|
color: #409eff;
|
}
|
}
|
|
.tabsLi {
|
border-left: 2px solid #409eff;
|
color: #409eff;
|
}
|
|
|
}
|
|
|
}
|
</style>
|
