在uniapp引入uView组件时,发现使用Tabs组件不能自定义组件,只能传一些文字数字信息也没有插槽,官网效果如下
https://www.uviewui.com/components/tabs.html本
然后本人也想投机取巧,某度一下看看别个有没有好的解决方案,不仅没有找到,还有人骗我流量。 正准备自己自定义,或者把以前的封装的拿出来时,无意打开组件源码,好家伙,特好二改,分分钟就实现自定义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>