Uniapp多选Popup（弹出层）_uni-app 弹窗 多选列表可修改

uniapp中多选组件很少，故个人简单开发了一个，可简单使用，也可根据个人需求稍微改进

支持的功能

• 单选
• 多选（默认）
• 限制选择数量
• 默认选中
• 禁用选项

属性说明

简单使用

<template>
	<view>
		<button @click="onMultiplePick">选择</button>
		<multiple-pick ref="multiplePick" :list="multiplePickList" key-name="id" disabled-key="disabled"
			disabled-value="1" :defaults="[]" @confirm="onMultiplePickConfirm" :max="2" max-message="已超出最大选项"></multiple-pick>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				multiplePickList: []
			}
		},
		methods: {
			onMultiplePick() {
				this.$refs.multiplePick.show();
			},
			onMultiplePickConfirm(selectedList) {
				console.log(selectedList);
				this.$refs.containerMultiplePick.close();
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

代码

下面是多选弹窗组件代码，使用了uView的u-popup来作为弹出容器，可根据项目框架自行更改弹出组件。

<template>
  <u-popup :show="pickShow" mode="bottom" :round="10" closeOnClickOverlay @close="onCancel">
    <view class="multiple-pick-content">
      <view class="top">
        <view class="cancel" @tap="onCancel">取消</view>
        <view class="confirm" @tap="onConfirm">确认</view>
      </view>
      <view class="list-container">
        <view class="item-container">
          <view class="item" :class="{'selected': isSelected(item), 'disabled': isDisabled(item)}"
                v-for="(item, index) in list" :key="index" @tap="onClick(item, index)">
            <view>
              {{ keyName ? item[keyName] : item }}
            </view>
            <u-icon v-if="isSelected(item)" name="checkmark" :color="isDisabled(item) ? '#959595' : '#2979ff'"
                    size="18"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "multiplePick",
  data() {
    return {
      pickShow: false,
      selecteds: []
    };
  },
  props: {
    /**
     * 开启单选
     */
    single: Boolean,
    /**
     * 可选最多项
     */
    max: Number,
    /**
     * 超出最大项提示
     */
    maxMessage: String,
    /**
     * 数据集合
     */
    list: Array,
    /**
     * 默认选择
     */
    defaults: Array,
    /**
     * 主键名，如果没有，则识别为字符串数组
     */
    keyName: String,
    /**
     * 禁用属性名，前提是有keyName
     */
    disabledKey: String,
    /**
     * 禁用值，前提是有disabledKey
     */
    disabledValue: String
  },
  watch: {
    defaults: {
      handler(n) {
        // 不能直接赋值，否则selecteds变化时会改变默认值
        this.selecteds = n.slice(0, n.length);
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 当前项是否禁用
     */
    isDisabled(item) {
      return this.keyName && this.disabledKey && this.disabledValue && item[this.disabledKey] === this.disabledValue;
    },
    /**
     * 当前项是否选中
     */
    isSelected(item) {
      return this.selecteds.includes(this.keyName ? item[this.keyName] : item);
    },
    /**
     * 打开选择器
     */
    show() {
      this.pickShow = true;
    },
    /**
     * 关闭选择器
     */
    close() {
      this.pickShow = false;
    },
    /**
     * 数据项点击监听
     */
    onClick(item, index) {
      if (this.isDisabled(item)) {
        // 如果是禁用的，不执行
        return;
      }
      // 获取当前项值
      const value = this.keyName ? item[this.keyName] : item;
      if (this.single) {
        // 开启单选
        this.selecteds = [];
        this.selecteds.push(value);
      } else {
        // 获取当前项在已选中的集合中的位置
        const i = this.selecteds.indexOf(value);
        // 存在则删除，不存在则添加
        if (i !== -1) {
          this.selecteds.splice(i, 1);
        } else {
          if (this.max && this.selecteds.length >= this.max) {
            // 如果有最大值且已选超过最大值
            if (this.maxMessage) {
              // 有提示提示内容
              uni.showToast({
                icon: 'none',
                title: this.maxMessage
              });
              return;
            }
            // 否则删掉最旧的数据
            this.selecteds.shift();
          }
          this.selecteds.push(value);
        }
      }
    },
    /**
     * 确认按钮事件
     */
    onConfirm() {
      this.$emit('confirm', this.selecteds);
    },
    /**
     * 取消按钮事件
     */
    onCancel() {
      // 重新赋值选中的集合
      this.selecteds = this.defaults.slice(0, this.defaults.length);
      this.pickShow = false;
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="scss" scoped>
.multiple-pick-content {
  padding: 20px;
  box-sizing: border-box;
  min-height: 200px;
  max-height: 50vh;

  .top {
    padding: 0 0 10px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 32px;

    .cancel {
      color: #f43d18;
    }

    .confirm {
      color: #0066ff;
    }
  }

  .list-container {
    padding: 10px 0px 40px 0px;
    box-sizing: border-box;
    max-height: calc(50vh - 42px);
    height: 100%;
    overflow-y: auto;
  }

  .item-container {
    width: 100%;

    .item {
      padding: 10px 0;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;

      &.selected {
        color: #2979ff !important;
      }

      &.disabled {
        color: #959595 !important;
      }
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

预览

以下为打包app后的预览截图