tabs ==> component :is实现多个组件实现同一

2020-10-30  本文已影响0人  风中凌乱的男子
 <!-- 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);
}
上一篇 下一篇

猜你喜欢

热点阅读