vue组件之Tabs标签页

预览地址 这篇博客意在总结记录Bug的解决和完成组件的过程。

Tabs标签页

<x-tabs :selected.sync="selected">
        <x-tabs-item item="经济" name="1">
         财经报道
         </x-tabs-item>
</x-tabs>
复制代码

点击变换

按照上面的结构，内容应该放在tabs-item，那么选择既就由tabs控制。

tabs大致HTML结构

 <div class="tabs">
        <div class="tabs-header"........>
            <divclass="tabs-header-item".........>
                  // 标签页，这里简称  header-item
                  //.........
            </div>
            <div ref="line" class="line" v-if="!cards"></div>
            //高亮线条
        </div>
        <div class="tabs-content">
             <slot></slot>        
             //展示内容
        </div>
    </div>
复制代码

由于只有两个组件，所以组件通信就非常简单了。这里不做多的说明

内容切换的动画效果

如同预览所见的(目前所有position只有一种动画效果),有一种轮播切换的赶脚。

遇到的问题

一般这种动画容易造成一