212 lines
4.6 KiB
Vue
212 lines
4.6 KiB
Vue
<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",
|
||
components: {UIcon, UPopup},
|
||
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>
|