You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.3 KiB
102 lines
2.3 KiB
1 year ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<uni-popup @change="change" ref="popup" type="bottom" background-color="#fff">
|
||
|
|
<view class="select-container flex column">
|
||
|
|
<view class="select-title">
|
||
|
|
<slot name="title"> 请选择</slot>
|
||
|
|
</view>
|
||
|
|
<view class="select-search">
|
||
|
|
<slot name="search"></slot>
|
||
|
|
</view>
|
||
|
|
<view class="select-list oneflex">
|
||
|
|
<view @click="select(item[selectValue])" v-for="item in options" class="select-list-item flex">
|
||
|
|
<view class="select-list-item-label oneflex">{{item[label]}}</view>
|
||
|
|
<view class="select-list-item-bottom">
|
||
|
|
<radio style="transform:scale(0.7)" :value="item[selectValue]"
|
||
|
|
:checked="selectedData.includes(item[selectValue])" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
maxLength:{
|
||
|
|
type:Number,
|
||
|
|
default: 3
|
||
|
|
},
|
||
|
|
label:{
|
||
|
|
type: String,
|
||
|
|
default: 'label'
|
||
|
|
},
|
||
|
|
selectValue:{
|
||
|
|
type: String,
|
||
|
|
default: 'value'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
isMultiple: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [ ]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
options:function(n, o){
|
||
|
|
this.selectedData=[];
|
||
|
|
|
||
|
|
},
|
||
|
|
value: function(n, o) {
|
||
|
|
if (n) {
|
||
|
|
this.$refs.popup.open('bottom')
|
||
|
|
} else {
|
||
|
|
this.$refs.popup.close();
|
||
|
|
this.$emit('settle',this.settle());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selectedData: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
settle(){
|
||
|
|
return this.isMultiple? this.options.filter(item=>this.selectedData.includes(item[this.selectValue]) ):this.options.find(item=>this.selectedData.includes(item[this.selectValue]))
|
||
|
|
},
|
||
|
|
select(e) {
|
||
|
|
if(this.selectedData.length>=this.maxLength&&!this.selectedData.includes(e)){
|
||
|
|
uni.showToast({
|
||
|
|
title:'最多选择3位',
|
||
|
|
icon:"none"
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
if (this.isMultiple) {
|
||
|
|
this.selectedData.includes(e)? this.selectedData.splice(this.selectedData.findIndex(item => item == e), 1): this.selectedData.push(e);
|
||
|
|
} else {
|
||
|
|
this.selectedData = this.selectedData.includes(e)?[]:[e];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
this.$emit('input', e.show)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'index.scss';
|
||
|
|
</style>
|