更新记录

1.2.1(2021-08-14)

修改了一些说明。

1.2.0(2021-08-12)

添加optionsDirection参数,可以自定义下拉框位于选择内容的上方或下方

查看更多

平台兼容性

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

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 点击项目触发的事件 参数(索引,该项的值)

项目路径

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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