47 lines
1.0 KiB
JavaScript
47 lines
1.0 KiB
JavaScript
const tabComponent = {
|
|
template: `
|
|
<ul class="tabList">
|
|
<li v-for="item in tabComponent.list" :key="item.id" @click='tabComponent.iconHandler(item)'>
|
|
<img :src="current===item.id?item.checkedSrc:item.src" alt="">
|
|
<p>{{item.text}}</p>
|
|
</li>
|
|
</ul>`,
|
|
props: {
|
|
/* tab选中下标 */
|
|
current: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
|
|
/* tab数据列表 */
|
|
list: [
|
|
{
|
|
id: 1,
|
|
src: "./img/home.png",
|
|
checkedSrc: "./img/checked_home.png",
|
|
link: "./couponCollection.html",
|
|
text: "首页"
|
|
},
|
|
{
|
|
id: 2,
|
|
src: "./img/order.png",
|
|
checkedSrc: "./img/checked_order.png",
|
|
link: "./myOrder.html",
|
|
text: "订单"
|
|
},
|
|
{
|
|
id: 3,
|
|
src: "./img/coupon.png",
|
|
checkedSrc: "./img/checked_coupon.png",
|
|
link: "./myCoupon.html",
|
|
text: "我的券"
|
|
}
|
|
],
|
|
|
|
/* 根据不同icon进行跳转 */
|
|
iconHandler(item) {
|
|
window.location.replace(item.link)
|
|
}
|
|
}
|