美文网首页
vue-使用万能组件实现tab切换

vue-使用万能组件实现tab切换

作者: Cris娜娜 | 来源:发表于2018-11-27 16:21 被阅读0次

    其实实现tab切换的方式有很多种,在豆瓣的小项目中,我想着尝试用component组件实现一下

    <div class="tab" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)" :style="isActive===index?'border-bottom-color:#f00;color:#333;':'color: #9b9b9b;border-bottom-color:transparent'">{{item.text}}</div>

    其实这里改成动态设置class是比较简单的,但是当时是写成动态更改style了。

    isActive是data中设置的变量,便是当前是那个tab被选中了。

    然后是万能组件

    <component :is="tab_content" class="tabs_content"></component>

    点击某个tab触发changetab方法

    changeTab(index){

    this.isActive=index;

    this.tab_content=this.tab_content_arr[index];

    }

    tab_content和tab_content_arr的初始值

    tab_content:"BookBuy",

    tab_content_arr:["BookActivity","BookBuy","BookTabList"]

    其实他们就是我们引进的需要被切换的子组件的名称,使用时要将他们引入并注册好。

    import BookBuy from './BookBuy.vue';

    ...

    components:{

    BookBuy,

    ...

    },

    相关文章

      网友评论

          本文标题:vue-使用万能组件实现tab切换

          本文链接:https://www.haomeiwen.com/subject/gjagqqtx.html