使用component和slot的概念，製作兩個左右的tab
製作一個tab選單及tab內容的模版，可直接共用在HTML裡更換文字內容
這次仿momo購物網裡的其中兩個tab
momo
Amanda Hong
<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>
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;
}
}
}
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有很多種做法，目前感受是這種方便一些
以上為個人學習記錄
iThome鐵人賽
看影片追技術