更新记录

1.0.1（2021-06-30） 下载此版本

1.0.1版本更新

1. 更新支持app-nvue
2. 修改切换次数多时页面卡顿

平台兼容性

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 属性说明

fy-dropdown事件说明

Slots

fy-dorpdown-item 属性说明

fy-dropdown事件说明

Slots