更新记录

1.1.0（2021-10-21）

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

1.0.1（2021-10-12）

修复子项不能自动换行

1.0.0（2021-09-28）

初步版本

平台兼容性

说明

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

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

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

gljy-popup-select 属性介绍

gljy-popup-select 事件介绍

gljy-popup-select-item 属性介绍

gljy-popup-select-item 事件介绍

引入文件

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);//关闭窗口

}