<!-- tabs -->
<van-tabs v-model="active" color='#00beca' :line-width='20' title-active-color='#fff'>
<van-tab v-for="(item,index) in tabs" :key="index" :title="item.type" />
</van-tabs>
<!-- tabs ==> component :is实现多个组件实现同一个挂载点 -->
<component :is="activeTab" ref="child"></component>
data() {
return {
active: 0,
activeTab: 'Chat',
tabs: [
// {
// type: '文档',
// view: 'Chat',
// },
{
type: '互动',
view: 'Chat',
},
],
}
},
watch: {
active(newValue, oldValue) {
console.log(newValue);
}
},
components: {
Chat: resolve => {
require(['@/components/v2/live/chat.vue'], resolve)
},
},
::v-deep .van-tabs__line {
bottom: 20px;
}
::v-deep .van-tabs__wrap {
border-bottom: 1px solid #eee;
}
::v-deep .van-tabs__nav {
background: rgb(43, 48, 69);
}
网友评论