element-vue tabs标签页使用，前后两个三角标

最新推荐文章于 2025-06-04 15:16:41 发布

呢笙

最新推荐文章于 2025-06-04 15:16:41 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43610925/article/details/126758640

这篇博客介绍了如何使用Vue的El-Tabs组件实现自定义样式，包括消除原始样式的文字边框、居中显示和三角标记的控制。同时，展示了如何利用before-leave事件和v-model来管理当前激活的tab，并通过tab-click事件进行交互，以及在父组件间传递数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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;
}