更新记录

1.0.2(2024-12-10) 下载此版本

补充用法

1.0.1(2024-12-10) 下载此版本

用法

1.0.0(2024-12-10) 下载此版本

单选、多选

查看更多

平台兼容性

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

ls-selectAlterWindow

博客地址:(https://www.jianshu.com/p/dad06a0b3e10) 掘金地址:(https://juejin.cn/post/7234419104597770277)

前言:

为了实现和pc端一样的下拉选择组件,目前插件市场上也没有相关组件,所以单独封装,以供大家学习参考

参数

参数 解释 默认
multiple 是否多选 false
list 传入选择的数据列表 []
label-key 数据列表的展示字段 'label'
value-key 数据列表的值 "value"
title 窗口标题 '选择内容'
placeholder 输入框提示文字 '请输入'
clearable 输入框是否显示可以清空按钮 false
@confirm 确认按钮的回调方法 必传
@change 单选的时候回调方法 单选必传

单选用法

    <!-- 单选 -->
<ls-selectAlterWindow ref="singleSelctedRef" :multiple="false" :list="transferUserList" label-key="label"
    value-key="value" placeholder="请输入进行检索" title="单选" clearable v-model="selectInfo.transferUserList"
    @confirm="singleconfrom" @change="singleChange"></ls-selectAlterWindow>

    //js
singleClick() {
    this.$refs.singleSelctedRef.isShowModal = true;
},
singleconfrom(item) {
    this.selectInfo.transferUserListName = '';
    this.selectInfo.transferUserList = '';
},
singleChange(item) {
    if (item) {
        this.selectInfo.transferUserListName = item.label
    } else {
        this.selectInfo.transferUserListName = ""
    }
},

多选用法

<!-- 多选 -->
<ls-selectAlterWindow ref="morelistRef1" :multiple="true" :list="morelist" label-key="label"
    value-key="value" placeholder="请输入搜索" title="多选" clearable v-model="moreInfo.qySignUser"
    @confirm="moreChange"></ls-selectAlterWindow>

moreClick(){
    this.$refs.morelistRef1.isShowModal = true;
},
moreChange(item) {
    this.moreInfo.qySignUserName = item ? item : [];
    this.$forceUpdate()
},

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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