<template>
|
<view>
|
<u-popup :closeOnClickOverlay="true" :show="show" @close="cancel">
|
<view :style="{height}">
|
<view class="title">{{popupTitle}}</view>
|
<view style="padding: 20rpx;">
|
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
|
@scrolltolower="$emit('lower')">
|
|
<!--单选-->
|
<u-radio-group v-if="type == 'radio'" :borderBottom="true" iconPlacement="right"
|
placement="column" @change="groupChange" :value="value">
|
<u-radio :customStyle="{marginBottom: '12px'}" v-for="(item, index) in dataLists"
|
:key="item.value" :label="item.name" :name="item.value">
|
</u-radio>
|
</u-radio-group>
|
|
<!--多选-->
|
<u-checkbox-group v-if="type == 'checkbox'" :borderBottom="true" placement="column"
|
iconPlacement="right" @change="checkboxChange" v-model="checkboxValue">
|
<u-checkbox :customStyle="{marginBottom: '12px',paddingBottom:'12px'}"
|
v-for="(item, index) in dataLists" :key="index" :label="item[name]" :name="index">
|
</u-checkbox>
|
</u-checkbox-group>
|
|
</scroll-view>
|
<u-gap height="45"></u-gap>
|
<view class="bottons">
|
<u-row>
|
<u-col customStyle="padding:0 20rpx 20rpx 10rpx" span="12">
|
<u-button @click="submit" type="primary" throttleTime="1000" :disabled="isDisabled">确认
|
</u-button>
|
</u-col>
|
</u-row>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
|
</view>
|
</template>
|
|
<script>
|
/**
|
* 公共选择下拉框，基于uview。支持下拉加载、列表搜索、单选｜多选
|
* @author qianziyu
|
* @description 弹出层选择器，基于uview中u-popup实现
|
* @property {Array} dataLists 数据列表
|
* @property {String} name 列表显示的字段名
|
* @property {Boolean} show 是否展示弹窗 (默认 false )
|
* @property {String} type 选择类型 单选｜多选 (默认 单选 )
|
* @property {Boolean} showSearch 是否显示搜索框 (默认 true )
|
* @property {String} popupTitle 列表标题
|
* @property {String} placeholder 搜索框placeholder
|
* @event {Function} search 搜索事件，返回keyword
|
* @event {Function} lower 滑动到底部触发，用于下拉加载新数据
|
* @event {Function} cancel 组件关闭事件
|
* @event {Function} submit 提交按钮,返回选中的列表数据
|
* @example <common-select :show="show" :popupTitle="popupTitle" @cancel="show=false" @search="selectSearch" name="cworkStationName" @submit="onsubmit"
|
:dataLists="dataLists" placeholder="输入工站名称搜索"></common-select>
|
*/
|
export default {
|
name: "my-select",
|
|
props: {
|
dataLists: {
|
default: {},
|
type: Array
|
},
|
popupTitle: {
|
default: '列表选择',
|
type: String
|
},
|
show: {
|
default: false,
|
type: Boolean
|
},
|
|
height: {
|
type: String,
|
default: "100%"
|
},
|
name: {
|
default: 'name',
|
},
|
|
type: {
|
default: 'radio',
|
type: String
|
},
|
|
showSearch: {
|
default: true,
|
type: Boolean
|
},
|
|
placeholder: {
|
default: '请输入搜索内容'
|
},
|
|
value: {},
|
},
|
data() {
|
return {
|
keyword: '',
|
scrollTop: 0,
|
checkboxData: [],
|
checkboxValue: [],
|
radioData: {},
|
radioValue: '',
|
defaultValue: "",
|
};
|
},
|
watch: {
|
dataLists: {
|
handler(newVal) {
|
if (newVal.length > 0) {
|
this.radioData = this.dataLists.filter(e => e.value == this.value)[0]
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
computed: {
|
isDisabled() {
|
if ((JSON.stringify(this.radioData) === '{}') && (this.checkboxData.length === 0)) {
|
return true
|
} else {
|
return false
|
}
|
}
|
},
|
mounted() {
|
this.defaultValue = this.value
|
},
|
options: {
|
styleIsolation: 'shared'
|
},
|
methods: {
|
checkboxChange(n) {
|
this.checkboxData = []
|
n.forEach(key => {
|
this.checkboxData.push(this.dataLists[key])
|
})
|
},
|
//选择列表项触发
|
groupChange(n) {
|
// this.dataLists[n]
|
this.radioData = this.dataLists.filter(v => v.value == n)[0]
|
this.$emit("input", n)
|
},
|
//点击搜索触发
|
search() {
|
this.$emit('search', this.keyword)
|
},
|
//点击取消按钮触发
|
cancel() {
|
this.$emit("input", this.defaultValue)
|
this.$emit('cancel')
|
},
|
//提交触发
|
submit() {
|
if (this.type == 'radio') {
|
if (JSON.stringify(this.radioData) == '{}') {
|
uni.$u.toast('请选择数据')
|
return;
|
}
|
this.$emit('submit', this.radioData)
|
} else if (this.type == 'checkbox') {
|
if (this.checkboxData.length == 0) {
|
uni.$u.toast('请选择数据')
|
return;
|
}
|
this.$emit('submit', this.checkboxData)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.u-popup {
|
.title {
|
border-bottom: 1px solid #f7f7f7;
|
padding: 20rpx;
|
text-align: center;
|
font-weight: bold;
|
}
|
}
|
|
.scroll-Y {
|
height: 650rpx;
|
}
|
|
.bottons {
|
background-color: white;
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
bottom: constant(safe-area-inset-bottom);
|
bottom: env(safe-area-inset-bottom);
|
}
|
</style>
|
