更新记录

1.1.0(2021-10-21)

  1. 子项选中代码做了重构,更改了判定是否选中的逻辑,精简代码
  2. 兼容微信小程序

1.0.1(2021-10-12)

修复子项不能自动换行

查看更多

平台兼容性

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

说明

弹出窗口,提供选择内容, 支持多选和单选

** 组件名: gljy-popup-select 关联的子组件:gljy-popup-select-item

目前就这一种子组件(gljy-popup-select-item), 后续看有机会再扩展其他的子组件吧

gljy-popup-select 属性介绍

属性名 类型 默认值 说明
title String 请选择 标题

gljy-popup-select 事件介绍

事件称名 说明 返回参数
cancel 用户点击遮罩货取消按钮激活事件 this
okOnclick 用户点击确定按钮激活有回调函数 this,回调函数返回true窗口关闭

gljy-popup-select-item 属性介绍

属性名 类型 默认值 说明
title String "" 标题
multiSelect Boolean false 是否多选
idkey String id 指定传入数据的位置id名称
nameKey String name 指定传入数据的显示名称
data Array 指定选择的子项数据集合
required Boolean false 是否必填(设置了标题就会有红色的*)

gljy-popup-select-item 事件介绍

事件称名 说明 返回参数
itemOnclick 点击子项的时候激活事件 selectItem (返回选中的子项数据,数组格式)

引入文件

import gljyPopupSelect from "@/components/gljy-popup-select/gljy-popup-select.vue";
import gljyPopupSelectItem from "@/components/gljy-popup-select/gljy-popup-select-item/gljy-popup-select-item.vue";

前端使用

<gljyPopupSelect ref="popupSelect" @okOnclick="okOnclick" @cancel="cancel">
    <gljyPopupSelectItem ref="itemType" :required="true" title="车型" :data="vehicle.type" idkey="code" nameKey="name" @itemOnclick="itemTypeOnclick"></gljyPopupSelectItem>
    <gljyPopupSelectItem ref="itemLenght" title="车长" :data="vehicle.length" idkey="code" nameKey="name" @itemOnclick="itemLenghtOnclick"></gljyPopupSelectItem>
</gljyPopupSelect>

数据格式

data:{
    return {
        vehicle:{
            type:[{code:1, name:"平板"},{code:2,name:"高栏"},{code:3,name:"挂车"}],
            length:[{code:1,name:"7"},{code:2,name:13},{code:3,name:9}]
        }
    }
}

事件传参

  1. 先通过 _show() 打开弹出选择框,数据加载后
  2. 用户点击选择框里面的选项后,就会激活itemOnclick事件,通过此事件传入的参数,可以得到本子项已经选择了哪些数据
  3. 用户选择数据后,会点击确定按钮,激活okOnclick事件,在此事件中可以判断一下之前用户是否已经选择选择完毕,如果没有选择完成 可以弹窗提醒,此事件有个回调,只有调用回调resolve(true),窗口才会关闭
    
    //打开显示窗口
    this.$refs.popupSelect._show();
    //车长返回
    itemLenghtOnclick(selectItem){
    console.log("获得已选中的item", selectItem);
    }
    //车型返回
    itemTypeOnclick(selectItem){
    console.log("获得已选中的item", selectItem);
    }

//点击确定按钮事件 okOnclick(res, resolve){ console.log("返回结果", res); //resolve(false); 调用回调,表示不关闭窗口,一般是用户必选项没有选择的时候调用

//关闭窗口前, 清除之前已选择的数据
this.$refs.itemLenght.clear();
this.$refs.itemType.clear();
resolve(true);//关闭窗口

}

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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