更新记录
1.0.0(2022-07-05)
下载此版本
首次发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
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:遮罩显示状态 |