82 lines
2.6 KiB
Vue
82 lines
2.6 KiB
Vue
<template>
|
||
<div class="Tab-main">
|
||
<div class="Tab-container">
|
||
<div class="Tab-box" @click="switchIdx($event)">
|
||
<template v-for="(item,idx) in props.tabList" >
|
||
<div class="Tab-items" >
|
||
<nuxt-link :data-idx = 'idx' :class="props.active.idx === idx ? '_Tab-item active':'_Tab-item'" :to="getHerf(item?.nuxtLink)" @click="changChildren(!!item.children,$event)">{{item.name}}</nuxt-link>
|
||
<div class="Tab-child-box dNone" v-if="item?.children">
|
||
<template v-for="(_item,_idx) in item.children">
|
||
<nuxt-link :to="getHerf(_item?.nuxtLink)" class="Tab-child-items" @click="switchCIdx(_idx,$evnet)">{{_item.name}}</nuxt-link>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
/**
|
||
*
|
||
* @type {Readonly<ExtractPropTypes<{tabList: ArrayConstructor, active: ObjectConstructor}>>}
|
||
* @description 接收两个参数，第一个是tabList，第二个是active
|
||
* @example：
|
||
* tabList：[
|
||
* {
|
||
name: '招生新闻', //名字
|
||
target: news //组件 也可以是a标签路径,可选
|
||
},
|
||
//。。。
|
||
* ]
|
||
* active：reactive({idx:0}) //必须用reactive包裹成一个对象，里面必须包含idx属性
|
||
，这个idx为默认先展示第几个
|
||
* @return 这个组件没有返回值，如果你选中了一个选项，它会更新这个active，你可以用watch监听这个active
|
||
*/
|
||
const props = defineProps({
|
||
tabList:Array,
|
||
active:Object
|
||
})
|
||
|
||
let idx = 0
|
||
const switchIdx = function (e){
|
||
let tag = e.target,
|
||
cl = tag.classList
|
||
if(cl.value.indexOf('_Tab-item')!==-1){
|
||
tag.parentElement.parentElement.children[idx].children[0].classList.remove('active')
|
||
idx = Number(tag.dataset.idx)
|
||
tag.parentElement.parentElement.children[idx].children[0].classList.add('active')
|
||
|
||
props.active.idx = idx
|
||
props.active.name = tag.innerText;
|
||
if('target' in props.active){
|
||
props.active.target = props.tabList[idx].target
|
||
}
|
||
props.active.nuxtLink = props.tabList[idx].nuxtLink
|
||
}
|
||
|
||
}
|
||
const changChildren = function (has,e){
|
||
if(has){
|
||
let tag = e.target,
|
||
cl = tag.classList
|
||
if(cl.value.indexOf('_Tab-item')!==-1){
|
||
tag.nextElementSibling.classList.toggle('dNone')
|
||
}
|
||
}else {
|
||
[...document.getElementsByClassName('Tab-child-box')].map(item=>{
|
||
item.classList.add('dNone')
|
||
})
|
||
}
|
||
}
|
||
const switchCIdx = function (_idx,e){
|
||
props.active.cIdx = _idx
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/Tab/index.scss"></style>
|
||
<style scoped src="~/assets/css/Tab/media.scss"></style>
|