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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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="http://img2.58codes.com/2024/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有很多种做法，目前感受是这种方便一些

以上为个人学习记录