ai-watch-app/uni_modules/liu-data-select/readme.md

liu-data-select适用于uni-app项目的select下拉框选择器组件

本组件目前兼容微信小程序、H5

本组件是非常简单好用的select下拉框选择器，可点击任意元素弹出，可自定义选择框大小、颜色、内容等，源码简单易修改

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用方式

<template>
	<view class="page-main">
		<view class="title">示例一：</view>
		<liu-data-select elementId="data-select1" :dataList="dataList" @change="change">
			<input id="data-select1" v-model="name" class="btn-info" placeholder="请选择" disabled />
		</liu-data-select>

		<view class="title">示例二：</view>
		<liu-data-select elementId="data-select2" :dataList="dataList" @change="change1">
			<input id="data-select2" v-model="name1" class="btn-info1" placeholder="请选择" disabled />
		</liu-data-select>

		<view class="title">示例三：</view>
		<liu-data-select elementId="data-select3" :dataList="dataList" @change="change2" bgColor="#000000"
			color="#FFFFFF">
			<view id="data-select3" class="btn-info1">{{name2 || '点击选择'}}</view>
		</liu-data-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				name1: '',
				name2: '',
				dataList: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10']
			}
		},
		methods: {
			change(e) {
				this.name = e
				console.log('点击示例一选项：', e)
			},
			change1(e) {
				this.name1 = e
				console.log('点击示例二选项：', e)
			},
			change2(e) {
				this.name2 = e
				console.log('点击示例三选项：', e)
			}
		}
	}
</script>

<style scoped>
	.page-main {
		padding: 20rpx;
	}

	.title {
		margin: 32rpx;
	}

	.btn-info {
		width: 600rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: solid #f0f0f0 1px;
		border-radius: 12rpx;
		padding: 0 30rpx;
	}

	.btn-info1 {
		width: 300rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: solid #f0f0f0 1px;
		border-radius: 12rpx;
		padding: 0 30rpx;
		line-height: 88rpx;
	}
</style>

属性说明

名称	类型	默认值	描述
elementId	String		所点击元素id(必须传)
dataList	Array	[]	下拉框数据源
bgColor	String	#FFFFFF	下拉框背景色
radius	Number	8	下拉框圆角(rpx)
dWidth	Number	0	下拉框宽度(rpx)，不传则默认取所点击元素的宽度
dHeight	Number	0	下拉框高度(rpx)，不传则默认由内容撑开
dMaxHeight	Number	0	下拉框最大高度(rpx)，超出则内部滚动
color	String	#333333	字体颜色
fontSize	Number	28	字体大小(rpx)
lineHeight	Number	66	字体行高(rpx)
@change	Function		点击选项回调事件