风凌天下,盛世嫡妃凤轻小说,完美世界有声小说全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vue2.0多Tab切換組件的封裝實例

Vue2.0 多 Tab切換組件簡單封裝，滿足自己簡單的功能，可以直接拿去使用！

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設計,永春網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:永春等地區(qū)。永春做網(wǎng)站價格咨詢:028-86922220

首先上效果圖：

Vue2.0 多 Tab切換組件的封裝實例

功能簡單介紹：

1、支持tab切換

2、支持tab定位

3、支持tab自動化

仿React多Tab實現(xiàn)，總之可以正常使用滿足日常需求，

1、使用方法：

==index.vue文件==

PS：TabItems是我的TabSwitch組件，tab頁面標題就是 div 中的name值，倆面是內(nèi)容，也可以是子組件。

接下來展示TabItems組件

2、組件

index.less文件

body,html {margin: 0;}

* {
  opacity: 1;
  -webkit-backface-visibility: hidden;
}

.tabItems {
  .Tab_tittle_wrap {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
    background: @ffffff;
    display: -webkit-box;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: @222222;
    border-bottom: 1px solid rgba(46, 177, 255, 0.08);
    box-shadow: 0px 0px 25px 6px rgba(46, 177, 255, 0.21);
    span {
      display: block;
      text-align: center;
      width: 26%;
      margin: 0 24px;
      font-size: 26px;
      position: relative;
      i {
        display: inline-block;
        position: absolute;
        width: 1px;
        height: 50px;
        top: 15px;
        right: -24px;
        background: @dddddd;
      }
      &:last-child {
        i {
          display: none;
        }
      }
    }
    .router-link-active {
      color: #8097f9;
      border-bottom: 1px solid #8097f9;
    }
  }
  .Tab_item_wrap {
    position: absolute;
    top: 82px;
    width: 100%;
    z-index: 0;
    background: @ffffff;
    bottom: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .showAnminous {
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: "rightMove";
    /*動畫名稱，需要跟@keyframes定義的名稱一致*/
    -webkit-animation-duration: .3s;
    /*動畫持續(xù)的時間長*/
    -webkit-animation-iteration-count: 1;
    /*動畫循環(huán)播放的次數(shù)為1 infinite為無限次*/
  }
}

@-webkit-keyframes rightMove {
  0% {
    -webkit-transform: translate(110%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}

@-ms-keyframes rightMove {
  0% {
    -ms-transform: translate(110%, 0);
  }
  100% {
    -ms-transform: translate(0, 0);
  }
}

@keyframes rightMove {
  0% {
    -webkit-transform: translate(110%, 0);
    -ms-transform: translate(110%, 0);
    transform: translate(110%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

TabItems.vue

PS：

created、mounted這兩個方法不需要過多介紹，Vue生命周期

1、created方法介紹。

獲取瀏覽器鏈接地址：libUtils.GetURLParamObj();獲取瀏覽器鏈接地址的

created這個方法主要是用來定位tab具體顯示哪個頁面的

2、mounted方法介紹

主要是用于隱藏內(nèi)容容器的

3、tabswitch方法

用來切換組件容器的顯示的頁面！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：Vue2.0多Tab切換組件的封裝實例
文章源于：http://fisionsoft.com.cn/article/pejjco.html

新聞中心

其他資訊