uniapp之自定义Tabs标签（主要是改uView的源码哈哈）

“我正在参加「掘金·启航计划”

在uniapp引入uView组件时，发现使用Tabs组件不能自定义组件，只能传一些文字数字信息也没有插槽，官网效果如下

www.uviewui.com/components/…

然后本人也想投机取巧，某度一下看看别个有没有好的解决方案，不仅没有找到，还有人骗我流量。 正准备自己自定义，或者把以前的封装的拿出来时，无意打开组件源码，好家伙，特好二改，分分钟就实现自定义tabs标签了

第一步：找到文件

第二步：看一下源码复不复杂，复杂的话放弃（也不是不行）

看到了吗，核心代码写的就是一个text标签，也没有插槽，所以不能自定义扩展组件。所以只要在这里改一下就好了。

第三步：修改思路主要是是利用作用域插槽传值

• 总结就是利用作用域插槽，不想自定义的时候用默认内容，想自定义的时候利用作用域把值再传回来

核心代码粘一下

    //修改
    <slot name="test" :item="item">
            <text
                    :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
                    class="u-tabs__wrapper__nav__item__text"
                    :style="[textStyle(index)]"
            >{{ item[keyName] }}</text>

    </slot>
    //使用
    <u-tabs :list="list1" >
          <template v-slot:test="{ item }">
           {{item.name}}11
           </template>
    </u-tabs>

新增适应小程序（以上适用于web和app）（以下同时适配多端）

//源码修改方式
<view :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
								class="u-tabs__wrapper__nav__item__text" :style="[textStyle(index)]">
    <!-- #ifdef MP -->
    <slot>{{ item[keyName] }}</slot>
    <slot name="lable{{index}}"></slot>
    <!-- #endif -->

    <!-- #ifdef H5 || APP-PLUS  -->
    <slot :name="`lable${index}`">{{ item[keyName] }}</slot>
    <!-- #endif -->

</view>


//使用
<u-tabs :list="list" @click="changeTab" lineWidth='40' lineHeight="5">
        <!-- #ifdef MP -->
        <template v-for="(item, index) in list" slot="lable{{index}}">
        <!-- #endif  -->
        <!-- #ifdef H5  || APP-PLUS   -->
        <template v-for="(item, index) in list" :slot="`lable${index}`">
                <!-- #endif -->
                <view >这里写自定义内容 </view>

        </template>
</u-tabs>

新增的总结改的位置和上面改的一样 看出来了这里主要是使用了动态插槽，因为小程序不支持作用域插槽