更新记录

1.2.1(2021-08-14) 下载此版本

修改了一些说明。

1.2.0(2021-08-12) 下载此版本

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

1.1.0(2021-07-17) 下载此版本

select框添加loading状态,判断数据加载中

查看更多

平台兼容性

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协议
765***@qq.com

2025-02-26

如果数据过多会卡,可以加多一个远程加载数据的功能不

131***@qq.com

2023-11-06

在app上,选择后,再去点击时间组件picker,又会显示出下拉bug

154***@qq.com

2023-06-29

selectitem(index, item) { this.active = false; if(index == -1) { this.changevalue = '' }else{ this.changevalue = item.label } this.$emit("selectitem", index, item) },

154***@qq.com 2023-06-29

selectitem(index, item) { this.active = false; if(index == -1) { this.changevalue = '' }else{ this.changevalue = item[this.slabel] } this.$emit("selectitem", index, item) },

287***@qq.com

2023-04-06

手机端手指无法滑动,而开发者工具调试时用鼠标倒是可以向下滚动 怎么解决呀

455***@qq.com

2023-03-17

在uni-drawer组件内嵌套此组件会导致手机端手指无法滑动,而开发者工具调试时用鼠标倒是可以向下滚动。

343***@qq.com

2023-01-13

你好,请教一下,进入页面后输入框内,默认显示数据。 <luyj-select-lay :value="areaName" :options="dataLists" placeholder="请选择或输入区域" @selectitem="selectitem"> 我进入的页面的时候,从内存里面拿到了下拉框的数据,并赋值了:value="areaName" 但是不显示内容

343***@qq.com 2023-01-13

好了,解决了,自己写错了

2990776359

2022-08-31

解决不能回县问题 一楼方法可以 在组件源码里面改 就可以 是组件源码
selectitem(index, item) { this.active = false this.changevalue = item[this.slabel] this.$emit("selectitem", {index, item}) }, 找到这个方法就可

315***@qq.com

2022-08-28

/** 点击组件列
         * @param {Object} index 索引
         * @param {Object} item 值
         */
        selectitem(index, item) {
            this.active = false
            this.changevalue = item[this.slabel]
            this.$emit("selectitem", {index, item}) 
        },
315***@qq.com 2022-08-28

解决不能回显的问题。

128***@qq.com

2022-08-15

苹果手机下存在输入框遮挡 使用 scss 样式如下解决: ::v-deep{ .uni-input-input{ padding: 10px 0; } }

241***@qq.com

2022-05-20

// 回显 this.changevalue = item.回显字段; // 楼上老哥的取值 this.$emit("selectitem", {index, item})