更新记录

1.0.1(2021-06-30)

1.0.1版本更新

  1. 添加app-nvue支持

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.10 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

fy-dropdown 顶部弹出层

fy-dropdown支持app-nvue、app-vue、微信小程序、H5等,没有标明的平台表示没有测试,谨慎使用即可。
fy-dropdown仅支持fy-dropdown-item组件,请看下面案例。
fy-dropdown依赖uni自带的uni-transition、uni-icons组件,使用fy-dropdown组件时请先下载依赖组件,并配置uniapp的easycom组件规范

调用示例

<view class="page page-index">
    <fy-dropdown :menuList="menuList">
        <fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions" type="column" @change="handlerColumnChange"></fy-dropdown-item>
        <fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions" @change="handlerTypeChange"></fy-dropdown-item>
        <fy-dropdown-item v-model="salesValue" dropdownKey="sales" :options="salesOptions" @change="handlerTypeChange"></fy-dropdown-item>
    </fy-dropdown>
</view>
<script>
export default {
    data() {
        return {
            menuList: [{ title: '综合排序', dropdownKey: 'synthesis' }, { title: '价格', dropdownKey: 'price' }, { title: '销量', dropdownKey: 'sales' }],
            synthesisValue: '',
            columnOptions: [
                { title: '任务类型', key: 'type', default: '', list: [{ text: '全部', value: '' }, { text: '类型1', value: '2' }, { text: '类型2', value: '1' }] },
                { title: '任务状态', key: 'status', default: '', list: [{ text: '全部', value: '' }, { text: '已完结', value: '1' }, { text: '工作中', value: '2' }] },
            ],
            priceValue: '',
            priceOptions: [{ label: '筛选条件1', value: 1 }, { label: '筛选条件2', value: 2 }, { label: '筛选条件3', value: 3 }],
            salesValue: '',
            salesOptions: [{ label: '筛选条件3', value: 1 }, { label: '筛选条件33', value: 2 }, { label: '筛选条件333', value: 3 }],
        }
    },
    methods: {
        handlerColumnChange(e) {
            if (e.cancel) return;

            this.columnOptions.forEach(item=>{
                item.default = e.data[item.key];
            })
        },
        handlerTypeChange(e) {
            console.log(e);
        },
    }
}
</script>

fy-dorpdown 属性说明

属性名 类型 默认值 说明
menuList Array [] 显示的顶部菜单列表
active-color String #00bcd4 菜单标题和选项的激活态颜色
inactive-color String #606266 菜单标题和选项的未激活态颜色
close-on-click-mask Boolean true 点击遮罩是否关闭菜单
close-on-click-self Boolean true 点击当前激活项标题是否关闭菜单
duration Number 300 选项卡展开和收起的过渡时间,单位ms
height Number 90 标题菜单的高度,单位rpx
border-bottom Boolean false 标题菜单是否显示下边框
title-size Number 28 标题的字体大小
menu-icon String arrowdown 菜单右侧的icon图标(依赖uni-icons组件)
menu-icon-size Number 11 菜单右侧图标的大小,单位px
background-color String transparent 背景色
H5-nav-bar-height Number 44 h5的导航栏高度,默认值是44,如果没有修改默认高度,那么默认值也不需要修改,单位px

fy-dropdown事件说明

事件名 说明 回调
open 打开弹层时触发 (current)=>{}
close 关闭弹层时触发 (current)=>{}

Slots

名称 说明
default 顶部弹出层中显示组件,仅可使用fy-dropdown-item

fy-dorpdown-item 属性说明

属性名 类型 默认值 说明
dropdown-key String null 当前选项的唯一标识
value [Number, String, Array, Object] 当前选中项的value值
options Array [] 当前选中项的value值
background-color String transparent 当前选项的背景色
max-height Number 800 当前弹框的最大高度,单位rpx
item-height Number 90 弹框中的每列的高度,单位rpx
type String fy-dorpdown-item类型,可选column,默认值是空,开发者可自行添加类型

fy-dropdown-item事件说明

事件名 说明 回调
change 选中值改变时触发 (value)=>{}

Slots

名称 说明
default 当dropdown-item的显示内容不能满足需求时,可自定义每项内容显示

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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