更新记录
1.0.0(2022-07-05)
下载此版本
首次发布
平台兼容性
uni-app
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
1.使用
<template>
<view>
<tabs-drop-down :right="true" />
</view>
</template>
<script>
import TabsDropDown from '../../components/tabs-drop-down/tabs-drop-down.nvue'
export default {
components: {
TabsDropDown
}
}
</script>
2.字段
| 字段 |
类型 |
默认值 |
可选值 |
说明 |
| right |
Boolean |
false |
- |
是否显示tabs右侧插槽 |
| list |
Array |
[] |
- |
标签数组,元素为对象,如[{name: '推荐'}] |
| itemStyle |
String |
padding-left: 15px; padding-right: 15px; height: 40px; |
- |
菜单item的样式 |
| activeStyle |
Object |
{ color: '#FB7299', fontSize: '14px' } |
- |
菜单选择中时的样式 |
| inactiveStyle |
Object |
{ color: '#606266', fontSize: '14px' } |
- |
菜单非选中时的样式 |
| lineColor |
String |
#FB7299 |
- |
滑块颜色 |
| lineWidth |
Number |
26 |
- |
是否显示tabs右侧插槽 |
| lineHeight |
Number |
2 |
- |
滑块高度 |
| collapse |
Number |
0 |
- |
弹出层内容距离顶部的距离 |
| mode |
String |
slide-down |
fade 淡入 / fade-up 上滑淡入 / fade-down 下滑淡入 / fade-left 左滑淡入 / fade-right 右滑淡入 / slide-up 上滑进入 / slide-down 下滑进入 / slide-left 左滑进入 / slide-right 右滑进入 / zoom-in 缩放 / zoom-out 缩放 |
使用的动画模式 |
| duration |
Number |
300 |
- |
动画时间 |
| transitionCustomStyle |
Object |
- |
- |
自定义动画样式 |
3.Methods
4.Events
| 事件名 |
说明 |
回调参数 |
| clickTabSlot |
tabs插槽被点击 |
Boolean:遮罩显示状态 |