使用tabs做的组件,点击事件,before-leave事件,v-model更换activeName等
示例图:
说明:下面css代码中,有一部分是将tabs的原始样式即文字边上的杠,字体居左显示等取消的代码,还有点击哪个时三角标指向那个,未被选择的tabs,三角标颜色为透明看不见
代码:
<template>
<div class="tabStyle">
<el-tabs v-model="activeName" :tab-position="tabPosition" :before-leave="beforeLeave" @tab-click="clicktabs">
<el-tab-pane
v-for="item in miningAreaList"
:key="item.id"
:label="item.mining_area_name"
:name="item.mining_area_name"
>
<span slot="label">
//指向右边的三角标(此注释不可直接拷贝)
<i class="el-icon-caret-right" />
{{ item.mining_area_name }}
//指向左边的三角标(此注释不可直接拷贝)
<i class="el-icon-caret-left" />
</span>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
GetHavePointsMineAreaList
} from '@/utils/common'
export default {
name: 'MultiStorey',
components: { },
directives: { },
data() {
return {
miningAreaList: [], // 采区数组
miningAreaCount: 0, // 采区总数-未使用
tabPosition: 'left',
activeName: '',
oldActiveName: ''
}
},
created() {
// 获取已绘制采区的采取数据
GetHavePointsMineAreaList((responseData) => {
this.miningAreaList = responseData
this.miningAreaCount = responseData.length // 采区总数-未使用
})
},
mounted() {
},
methods: {
// before-leave属性 用来获取上次所选采区
beforeLeave(newActiveName, oldActiveName) {
console.log(newActiveName)
this.oldActiveName = oldActiveName
},
// tabs点击事件
clicktabs(tab, e) {
var i = tab.index
//将点击的id传给父组件,在父组件进行一些操作
this.$emit('changeByTabsClick', this.miningAreaList[i].id)
},
// 根据父组件传入的采区name改变所选采区(:name="item.mining_area_name" activeName 可以改变这里的值 )
changeMiningAreaName(miningAreaName) {
this.activeName = miningAreaName
},
// 所选采区没有轨迹数据时回退指向上次所选(父组件调用)
reSetMiningAreaName() {
this.activeName = this.oldActiveName
}
}
}
</script>
<style lang="scss">
.tabStyle{
// 字体居中
.el-tabs--left .el-tabs__item.is-left {
text-align: center;
}
.el-tabs__item{
color:#fff;
font-size:16px;
padding: 0px;
// 左右三角标未选中时透明
.el-icon-caret-right{
color: transparent; //透明色
}
.el-icon-caret-left{
color: transparent; //透明色
}
}
.el-tabs__item.is-active {
color:#01FFF6 ;
// 左右三角标选中时浅绿色
.el-icon-caret-right{
color: #01FFF6;
}
.el-icon-caret-left{
color: #01FFF6;
}
}
// 鼠标悬停浅绿色
.el-tabs__item:hover {
color:#01FFF6 ;
}
// 删除tbs默认的横线
.el-tabs__active-bar{
display: none;
}
.el-tabs--left .el-tabs__nav-wrap.is-left::after{
display: none;
}
.el-tabs--left .el-tabs__header.is-left{
margin-right: 0px;
}
}
</style>
背景色以及位置在父组件的样式中设置的,
此组件是一个绝对定位,相当于漂浮在父组件所有东西的上边,我这里做的是放在“右侧中间位置”
.MultiStoreyStyle{
display: flex;
flex-direction: column;
justify-content:center;
position: absolute; //绝对定位
top: calc(50%);
right: 50px;
transform: translate(0%,-50%);
background: linear-gradient(90deg, rgba(10,30,56,0.3) 0%, #0A1E38 48%, rgba(10,30,56,0.3) 100%);
opacity: 1;
}