基本用法（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 即可禁用js
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 禁用
js
let list = [
{ label: "选项 1", value: 1 },
{ label: "选项 2", value: 2 },
{ label: "选项 3", value: 3 },
];输入过滤
filterKeys 配置项配置，默认是根据 label 过滤,可多字段
js
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 | 是否显示弹窗标题 |
| iconColor | String | #409eff | 复选框颜色 | |
| confirmTextStyle | String | 'color:#409eff' | 确认文字样式 | |
| 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>