zhgdyunapp/uni_modules/luyj-select-lay

luyj-select-lay

组件名：luyj-select-lay 代码块：'luyj-select-lay' 关联组件： 无

说明

这里是简单的select下拉选择组件。原插件地址。本人暂时将其uni_modules化,在加载数据时添加必要的提示。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请自行手动安装

基本用法

<!-- 通用写法 -->
<luyj-select-lay :value="tval" name="name" placeholder="请选择项目" :options="datalist"
	@selectitem="selectitem">
</luyj-select-lay>
<!-- 组件状态：加载中 -->
<luyj-select-lay :value="tval" name="name" placeholder="请选择项目" loading="true" :options="datalist"
			@selectitem="selectitem">
<!-- 禁用组件 -->
<luyj-select-lay :value="tval" name="name2" placeholder="请选择项目(禁用)" :options="datalist"
	:disabled="true">
</luyj-select-lay>
<!-- 自定义数据索引对象 -->
<luyj-select-lay :value="tval" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目(自定义数据)"
	:options="datalist2" @selectitem="selectitem2">
</luyj-select-lay>
<!-- 改变下拉框的位置 -->
<luyj-select-lay :value="tval" optionsDirection="top" name="name" placeholder="请选择项目" :options="datalist"
			@selectitem="selectitem">
		</luyj-select-lay>

实际使用下拉框时，可能需要考虑下列穿透问题

以上实例，使用的测试数据如下：

// data-com 数据
list: [{
		label: "label1",
		value: "value1"
	},
	{
		label: "label2",
		value: "value2"
	},
	{
		label: "label3",
		value: "value3"
	}

],
// 自定义数据
mylist: [{
		myname: "label1",
		myvalue: "value1"
	},
	{
		myname: "label2",
		myvalue: "value2"
	},
	{
		myname: "label3",
		myvalue: "value3"
	}		
],

属性

属性名	类型	默认值	说明
disabled	Boolean	false	是否禁用
zindex	Number	999	层级，防止多个组件一起使用时下拉栏穿透
options	Array	[]	数据列表
optionsDirection	String	bottom	数据的位置
loading	Boolean	false	是否加载中
loadingText	String	'数据加载中'	加载时提示文字
name	String	''	input字段名
value	String	''	默认展示的value值
placeholder	String	''	选项值为空时的占位符
slabel	String	'label'	自定义列表中键值对应关系（自定义列表的值对应label值）
svalue	String	'value'	自定义列表中键值对应关系（自定义列表的值对应value值)

optionsDirection 默认值

值	说明
top	数据列表位于输入框上方
bottom	数据列表位于输入框下方

事件

事件名	说明	返回值
@selectitem	点击项目触发的事件	参数（索引，该项的值）

项目路径

• codechina
• github