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
<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> |