使用vue的绑定类名功能写选项卡

最新推荐文章于 2022-07-05 08:34:57 发布

冷雨温喉

最新推荐文章于 2022-07-05 08:34:57 发布

阅读量250

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36652782/article/details/113353087

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

类似于这样的一个选项卡，content模块的li首先设置全是隐藏，表达式正确添加对应类名，让对应li显示，其他隐藏。

注：选项卡内部写echarts图的时候，鼠标点击第二个面板，echarts不显示，在点击事件里添加上

this.$nextTick(()=>{
this.wthChart1.resize();
})

便得到了解决。

html代码：

   <div>
      <ul class="tab-title">
        <li v-for="(item,index) in tabArr" :key="index" @click="handleList(index)" :class="{active:index==current}">
          <i :class="`iconfont ${item.icon}`"></i>
          <span>{{item.title}}</span>
        </li>
      </ul>
      <ul class="tab-content">
        <li :class="'tab-content-list '+(0==current ? 'showBlock': '')">
         1
        </li>
        <li :class="'tab-content-list '+(1==current ? 'showBlock': '')">
           2
        </li>
        <li  :class="'tab-content-list '+(2==current ? 'showBlock': '')">
          3
        </li>
      </ul>
    </div>

js代码：

    export default {
      name: "cmPanleLeft",
      data(){
        return{
          tabArr:[
            {
              title:'海岸线',
              icon:'iconbingtu'
            },
            {
              title:'围填海',
              icon:'iconbingtu'
            },
            {
              title:'海岸带',
              icon:'iconbingtu'
            }
          ],
          current:0
        }
      },
      methods:{
        handleList(index){
          // 点击选中当前tab，给当前tab绑定类名，其余不绑定
          this.current = index;
          this.$nextTick(()=>{
            this.wthChart1.resize();
          })
        }
       }
    }

css代码：

  .tab-title{
    float: left;
    width: 40px;
    height: 100%;
    background: #2f3a4c;
    color: #fff;
    font-size: 16px;
  }
  .tab-title li{
    height: 140px;
    text-align: center;
    cursor: pointer;
  }
  .tab-title .iconfont{
    color: #4199fd;
    font-size: 18px;
    position: relative;
    top: 23px;
  }
  .tab-title li span{
    width: 30px;
    display: inline-block;
    text-align: center;
    margin: 0 5px;
    position: relative;
    top: 26px;
  }
  .tab-title .active{
    background: #2180eb;

  }
  .tab-title .active .iconfont{
    color: #fff;
  }
  /*选项卡内容*/
  .tab-content{
    float: left;
    width: 414px;
    height: 100%;
    /*background: #fff;*/
  }
  .tab-content .tab-content-list{
    height: 100%;
    display: none;
  }
  .tab-content .showBlock{
    display: block;
  }