ex-ui

基本用法（list 为数组字符串）

vue

<template>
  <view style="padding: 40rpx;">
    <view>
      <button @click="openPopupSelect">弹窗选择器([String]格式)</button>
      <view> 当前选中项value:{{ selectVal }} </view>
      <view> 当前选中项label:{{ selectLabel }} </view>
    </view>
    <ex-popup-select
      v-model="selectVal"
      :list="list"
      ref="popupRef"
      @save="saveItem"
    >
    </ex-popup-select>
  </view>
</template>
<script>
export default {
  data() {
    return {
      selectVal: "苹果",
      selectLabel: "苹果",
      list: ["苹果", "香蕉", "橘子"],
    };
  },
  methods: {
    // 选中事件
    saveItem(data) {
      this.selectLabel = data.label;
    },
    //  打开基本Array<String>数据格式弹窗
    openPopupSelect() {
      this.$refs.popupRef.open();
    },
  },
};
</script>
<style lang="scss" scoped></style>

单选（list 为数组对象）

vue

<template>
  <view style="padding: 40rpx;">
    <view>
      <button @click="openPopupSelect">单选弹窗选择器</button>
      <view class=""> 当前选中项value:{{ selectVal }} </view>
      <view class=""> 当前选中项label:{{ selectLabel }} </view>
    </view>
    <ex-popup-select
      v-model="selectVal"
      :list="list"
      ref="popupRef"
      @save="saveItem"
    >
    </ex-popup-select>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      selectVal: 4,
      selectLabel: "单选选项4",
      list: [
        {
          label: "单选选项1",
          name: "名字1",
          value: 1,
        },
        {
          label: "禁用选项2",
          name: "打算2",
          value: 2,
          disabled: true,
        },
        {
          label: "禁用选项3",
          name: "萨达2",
          value: 3,
          disabled: true,
        },
        {
          label: "单选选项4",
          name: "asda",
          value: 4,
        },
        {
          label: "单选选项5",
          name: "adsad",
          value: 5,
        },
      ],
    };
  },
  methods: {
    // 打开单选弹窗
    openPopupSelect() {
      this.$refs.popupRef.open();
    },

    // 单选选中确认事件
    saveItem(data) {
      this.selectLabel = data.label;
      console.log(this.selectVal, "单选selectVal-----------");
      console.log(data, "单选------ids,arr-----------");
    },
  },
};
</script>

多选（list 为数组对象）

vue

<template>
  <view style="padding: 40rpx;">
    <view>
      <button @click="openPopupSelect">多选弹窗选择器(最多5项)</button>
      <view> 当前选中项value:{{ selectArr.join(",") }} </view>
      <view> 当前选中项label:{{ selectLabels.join(",") }} </view>
    </view>
    <ex-popup-select
      v-model="selectArr"
      :list="list"
      ref="popupRef"
      @save="saveItem"
      multiple
    ></ex-popup-select>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selectArr: [7, 8, 9],
      selectLabels: ["多选选项7", "多选选项8", "多选选项9"],
      list: [
        {
          label: "多选选项1",
          value: 1,
        },
        {
          label: "多选选项2",
          value: 2,
        },
        {
          label: "多选选项3",
          value: 3,
        },
        {
          label: "多选选项4",
          value: 4,
        },
        {
          label: "禁用选项5",
          value: 5,
          disabled: true,
        },
        {
          label: "禁用选项6",
          value: 6,
          disabled: true,
        },
        {
          label: "多选选项7",
          value: 7,
        },
        {
          label: "多选选项8",
          value: 8,
        },
        {
          label: "多选选项9",
          value: 9,
        },
        {
          label: "多选选项10",
          value: 10,
        },
        {
          label: "多选选项11",
          value: 11,
        },
        {
          label: "多选选项12",
          value: 12,
        },
        {
          label: "多选选项13",
          value: 13,
        },
        {
          label: "多选选项14",
          value: 14,
        },
        {
          label: "多选选项15",
          value: 15,
        },
      ],
    };
  },
  methods: {
    // 打开多选弹窗
    openPopupSelect() {
      this.$refs.popupRef.open();
    },

    // 多选选中确认事件
    saveItem(data) {
      this.selectLabels = data.label;
      console.log(this.selectArr, "多选selectVal-----------");
      console.log(data, "多选---------------");
    },
  },
};
</script>

禁用选项

禁用属性有两种方式，使用一种方式禁用,不要两种方式同时使用

方式一: 在 list 数组数据项中添加 diabled: true 即可禁用

let list = [
  {
    label: "选项1",
    name: "名字1",
    value: 1,
  },
  {
    label: "选项2",
    name: "打算2",
    value: 2,
    disabled: true,
  },
  {
    label: "选项3",
    name: "萨达2",
    value: 3,
    disabled: true,
  },
  {
    label: "选项4",
    name: "asda",
    value: 4,
  },
];

方式二: 配置 disabledArr,将 disabledArr 配置为[1,2],则选项一选项 2 禁用

let list = [
  { label: "选项 1", value: 1 },
  { label: "选项 2", value: 2 },
  { label: "选项 3", value: 3 },
];

输入过滤

filterKeys 配置项配置，默认是根据 label 过滤,可多字段

let filterKeys = ["label", "name"];
let list = [
  {
    label: "选项1",
    name: "名字1",
    value: 1,
  },
  {
    label: "选项2",
    name: "打算2",
    value: 2,
  },
  {
    label: "选项3",
    name: "萨达2",
    value: 3,
  },
  {
    label: "选项4",
    name: "asda",
    value: 4,
  },
];

属性

属性名	类型	默认值	可选值	说明
list	Array			列表数据支持异步
title	String	请选择		弹窗标题
isShowTitle	Boolean	true	true,false	是否显示弹窗标题
showFilter	Boolean	true	true,false	是否显示过滤输入框
filterKeys	Array	['label']		过滤的字段 key,默认为 label，可支持多个字段,以数组形式传递
props	Object	{ label: 'label',value: 'value' }		配置项
type	String	bottom	top,left,right,bottom	弹窗弹出位置（上下左右）
multiple	Boolean	false	true,false	弹窗是否多选
maxNum	Number	Infinity		最大选中数量, 仅多选有效
maxNumToast	String	超出最大选中数量		超出最大选中数量的提示信息
cancelSelectItem	Boolean	true	true,false	已经选中的选项再次点击的时候能否取消选中,默认 true 为可以取消
disabledArr	Array	[]		禁用选项
width	String	'750rpx'		弹窗内容区宽度
height	String	'80vh'		弹窗内容区高度
isMaskClick	Boolean	true	true,false	点击蒙版是否关闭弹窗
maskBackgroundColor	String	rgba(0,0,0,0.4)		蒙版背景颜色
backgroundColor	String	#ffffff		主窗口背景颜色
borderRadius	String	10px		设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
searchDistinguishCapital	boolean	true	true,false	搜索时不区分大小写

list 配置项

属性名	类型	默认值	说明
label	String,Number		显示的字段 ke
value	绑定的 key
disabled	Boolean	false	是否禁用选项 true 禁用

事件

事件名	说明
open	弹窗打开事件
close	弹窗关闭事件
save	弹窗点击确定事件
itemClick	选项点击事件

slot 插槽可自定义内容

详情可查看示例

vue

<ex-popup-select v-model="selectSlotArr" :list="list" ref="popupRef2">
    <template v-slot:default="{item,index}">
        <view>
            {{item.label}}
            <text v-if="index>4"> {{index}}</text>
        </view>
    </template>
</ex-popup-select>

基本用法（list 为数组字符串） ​

单选（list 为数组对象） ​

多选（list 为数组对象） ​

禁用选项 ​

禁用属性有两种方式，使用一种方式禁用,不要两种方式同时使用

输入过滤 ​

属性 ​

list 配置项 ​

事件 ​

slot 插槽 可自定义内容 ​

基本用法（list 为数组字符串）

单选（list 为数组对象）

多选（list 为数组对象）

禁用选项

输入过滤

属性

list 配置项

事件

slot 插槽可自定义内容