更新记录
1.0.3(2024-03-19) 下载此版本
修复可能存在的样式问题
1.0.2(2023-06-26) 下载此版本
1.0.2
1.0.1(2023-06-26) 下载此版本
1.0.1
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.4.11 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
## 介绍
主要功能为vue3版本的可滑动,超出可自动滚动的tab选项卡
样式自定义需要开发者自己通过外部样式进行重写
使用方法
下面的两个参数都是必传的
参数 | 类型 | 默认值 | 是否必传 | 说明 |
---|---|---|---|---|
tabList | Array | [] | 是 | 选项卡数据 |
modelValue | Number | 0 | 是 | 双向绑定的数据,选中的选项卡id,试用v-model传入 |
valueKey | String | value | 否 | 选项卡value,字段可自定义传入 |
labelKey | String | label | 否 | 选项卡名称,字段可自定义传入 |
iconKey | String | '' | 否 | 选项卡图标 |
在需要调用的页面
<template>
<view>
<auto-tabs :tabList="tabList" v-model="currentTabId" />
</view>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const currentTabId = ref(0)
const tabList = ref([
{
value: 1,
label: '男装'
},
{
value: 2,
label: '女装'
},
{
value: 3,
label: '童装'
},
{
value: 4,
label: '鞋子'
},
{
value: 5,
label: '配饰'
}
])
</script>