drop-down --下拉筛选菜单,多平台测试通过,不支持的平台暂未测试

199 阅读1分钟

drop-down --下拉筛选菜单,多平台测试通过,不支持的平台暂未测试

去 github 给个免费的Star吧!!

参数

可选参数属性列表

参数名说明类型是否必填默认值
filterData筛选列表Array[]
childName子级菜单字段名Stringsubmenu
fileds显示字段Stringname
isChild返回结果时是否一并返回子菜单Booleanfalse
autoStow选择完成是否自动收起菜单,仅列表模式有效Booleantrue
resetStow重置参数后自动收起菜单Booleanfalse
confirm菜单收起时返回赛选结果Function[]

filterData 格式和默认值设置

在 filterData 筛选列表中为需要选中的项添加 checked: true 即可,checked 不存或 checked:false 则不选中

const filterData = [{
	name: '价格',
	type: 'radio',
	submenu: [{
		name: '200-300',
	},{
		name: '500-600',
		checked: true //默认选中
	}]
}]

使用

从uniapp插件市场导入

<template>
	<view class="index">
		<drop-down :filterData="filterData" @confirm="confirm"></drop-down>
	</view>
</template>
<script>
	import data from '@/common/data.js'; //筛选菜单数据
	export default {
		data() {
			return {
				filterData: [],
			};
		},
		onLoad() {
			this.filterData = data;
		},
		methods: {
			confirm(e) {
				// 返回值为一个数组
				console.log('eeee', e);
			},
		},
	}
</script>

描述

组件内部使用scss进行书写样式,主题色是使用根目录下的uni.scss中的 unicolorprimary,使用HBuildX创建uniapp项目之后根目录下会自动创建uni.scss文件。如需修改主题色第一步:可以使用快捷键Ctrl+F输入uni-color-primary,使用HBuildX创建uniapp项目之后根目录下会自动创建uni.scss文件。 如需修改主题色 第一步:可以使用快捷键 Ctrl+F 输入 uni-color-primary。 第二步:选择本插件目录名称 drop-dowm 全部替换即可。

GitHub

git给个免费的Star吧!!

Link

github.com/EarlySummer…