更新记录

1.0.0(2022-07-05) 下载此版本

首次发布


平台兼容性

Vue2 Vue3
×
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

事件名 说明 参数
close 关闭遮罩层 -

4.Events

事件名 说明 回调参数
clickTabSlot tabs插槽被点击 Boolean:遮罩显示状态

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问