技術標籤：Vuevue

類似於這樣的一個選項卡，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;
  }