iT邦幫忙

0

VUE的多項tab製作

使用component和slot的概念,製作兩個左右的tab
製作一個tab選單及tab內容的模版,可直接共用在HTML裡更換文字內容

這次仿momo購物網裡的其中兩個tab
momo

HTML

<div id="app">
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
          <tabs>
                <div slot="tabwrap">
                  <tab name="goods" text="好物誌" v-bind:selected="true">
                    <div slot="tabinner">
                      <div class="row">
                        <div class="col-md-6">
                          <img src="https://img2.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e8.jpg?t=1536724521622" alt="" class="img">
                          <div>
                            <h5>AI雙向語言翻譯機</h5>
                          <p>27種語言自由互譯</p>
                          </div>
                          
                        </div>
                        <div class="col-md-6">
                          <img src="https://img2.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e15.jpg?t=1536724592617" alt="" class="img">
                          <div>
                            <h5>美白牙貼專業組</h5>
                          <p>每天30分,14天給你白皙美齒</p>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                  </tab>
                  <tab name="openBox" text="開箱文">
                    <div slot="tabinner">
                       <div class="row">
                        <div class="col-md-6">
                          <img src="https://img2.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e22.jpg?t=1536724677839" alt="" class="img">
                          <div>
                            <h5>時尚涼感沖孔舒適休閒鞋</h5>
                          <p>輕量薄底設計,特級橡膠材質</p>
                          </div>
                          
                        </div>
                        <div class="col-md-6">
                          <img src="https://img2.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e29.jpg?t=1536724815553" alt="" class="img">
                          <div>
                            <h5>成長鈣鎂加強護齒配方</h5>
                          <p>添加氧化鎂+護齒益生菌</p>
                          </div>
                          
                        </div>
                      </div>
                      
                    </div>
                  </tab>
                  <tab name="DM" text="電子型錄">
                    <div slot="tabinner">
                         <div class="row">
                        <div class="col-md-6">
                          <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e36.jpg?t=1536660567489" alt="" class="img">
                          <div>
                            <h5>來自北歐 簡單創新</h5>
                          <p>告別灰頭土臉的烤肉人生</p>
                          </div>
                          
                        </div>
                        <div class="col-md-6">
                          <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e43.jpg?t=1536660567492" alt="" class="img">
                          <div>
                            <h5>驅殘暑</h5>
                          <p>彷彿撒上奢華香調</p>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                  </tab>
                  <tab name="size" text="摩天商城">
                    <div slot="tabinner">
                       <div class="row">
                        <div class="col-md-6">
                          <img src="https://img4.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e50.jpg?t=1536920397679" alt="" class="img">
                          <div>
                            <h5>首購入會</h5>
                          <p>不限金額領好康 專屬好禮不可錯過</p>
                          </div>
                          
                        </div>
                        <div class="col-md-6">
                          <img src="https://img2.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e29.jpg?t=1536724815553" alt="" class="img">
                          <div>
                            <h5>金秋賞月攻略</h5>
                          <p>點數10倍加碼送 領券現折$99</p>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                  </tab>
                  <tab name="travel" text="旅遊&票券">
                    <div slot="tabinner">
                       <div class="row">
                        <div class="col-md-6">
                          <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e64.jpg?t=1536894640111" alt="" class="img">
                          <div>
                            <h5>礁溪鳳凰德陽川</h5>
                          <p>輕量薄底設計,特級橡膠材質</p>
                          </div>
                          
                        </div>
                        <div class="col-md-6">
                          <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_213_01/bt_0_213_01_e71.jpg?t=1536894640114" alt="" class="img">
                          <div>
                            <h5>雙人/家庭任選↘500</h5>
                          <p>豪華套餐吃到飽</p>
                          </div>
                          
                        </div>
                      </div>
                      
                    </div>
                  </tab>
                </div>
              </tabs></div>
        <div class="col-md-6"> <tabs>
                <div slot="tabwrap">
                 
                  <tab name="openBox" text="SHIMANO">
                    <div slot="tabinner" style="text-align: center;">
                       <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_214_01/bt_0_214_01_e8.jpg?t=1536761247394" alt="" width="670">
                      
                    </div>
                  </tab>
                  <tab name="DM" text="韓國油切烤盤">
                    <div slot="tabinner"  style="text-align: center;">
                      <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_214_01/bt_0_214_01_e15.jpg?t=1536761295776" alt="" width="670">
                    </div>
                  </tab>
                  <tab name="King" text="葡萄王">
                    <div slot="tabinner"  style="text-align: center;">
                       <img src="https://img3.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_214_01/bt_0_214_01_e22.jpg?t=1536761315848" alt="" width="670">
                    </div>
                  </tab>
                  <tab name="clothe" text="曼黛瑪璉">
                    <div slot="tabinner"  style="text-align: center;">
                                           <img src="https://img1.momoshop.com.tw/ecm/img/online/10/000/00/000/bt_0_214_01/bt_0_214_01_e29.jpg?t=1536802511357" alt="" width="670">
                    </div>
                  </tab>
                </div>
              </tabs></div></div>
    </div>
  </div>
</div>

CSS(SCSS)

body,html{
  padding:15px;
  font-family: "Microsoft Yahei",serif;
}

.img{
  width: 180px;
  height: 180px;
  border-radius: 15px;
  margin-right: 20px;
}

.nav-tabs{
  text-align: right;
  .nav-item{
    margin-bottom: -5px;
  }
  .nav-link{
    padding: 0.5em 2.5em;
    border-radius: 0;
    background-color: #ccc;
    color: #444;
    font-size: 0.8em;
  }
  .nav-link.active{
    border-top: 4px solid #D62671;
    color: #D62671;
    cursor: pointer;
  }
}


.tab-content{
  padding:15px;
  border: 1px solid #ccc;
  .col-md-6{
    display: flex;
    h5{
      color: #D62671;
      margin-top: 1.2em;
    }
    p{
      font-size: 0.8em;
    }
  }
}

JS

Vue.component('tabs',{
  template: `
    <div>
      <ul class="nav nav-tabs" role="tablist">
        <li v-for="tab in tabs" class="nav-item" role="presentation">
          <a :href="'#' + tab.name" @mouseover.prevent="selectTab(tab)" role="tab" class="nav-link" :class="{ 'active': tab.isActive}">{{tab.text}}</a>
        </li>
      </ul>
      <div class="tab-content">
        <slot name="tabwrap"></slot>
      </div>
    </div>
`,
  data(){
    return { tabs: [] }; 
  },
  created(){
    this.tabs = this.$children;
  },
  methods:{
    selectTab(selectedTab){
      this.tabs.forEach(function(tab){
        tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
});

Vue.component('tab',{
  template:`
    <div :id="'#' + this.name" role="tabpanel" v-if="isActive">
      <slot name="tabinner"></slot>
    </div>
`,data(){
  return{
    isActive: false
  };
},props: {
  text: { required: true },
  name: { required: true },
  selected: { default: false}
},
  mounted(){
    if(location.hash != ""){
      const url = location.hash;
      this.isActive = (url == '#' + this.name);
    } else{
      this.isActive = this.selected;
    }
  }
});

const app = new Vue({
  el: "#app",
  name: "momoTab"
});

範例網址

知道tab有很多種做法,目前感受是這種方便一些

以上為個人學習記錄


尚未有邦友留言

立即登入留言