132 lines
2.4 KiB
Vue
132 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view class="" style="position: relative;">
|
||
|
|
<view @click="handleSelectSwitch">
|
||
|
|
<slot v-if="customInput"></slot>
|
||
|
|
<default-select-input v-if="!customInput" :placeholder="placeholder" :show="show" :list="list" :value="value" :isWhite="isWhite"></default-select-input>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="mode == modeEnum.sheet">
|
||
|
|
<tpx-dialog :show="show" :title="title || placeholder" @onClose="handleSelectSwitch">
|
||
|
|
<content-items :value="value" :list="list" :minChecked="minChecked" :type="type"
|
||
|
|
@onChange="handleDataItemChange"
|
||
|
|
></content-items>
|
||
|
|
</tpx-dialog>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="mode == modeEnum.drop && show" class="md-drop-cont">
|
||
|
|
<content-items :value="value" :list="list" :minChecked="minChecked" :type="type"
|
||
|
|
@onChange="handleDataItemChange"
|
||
|
|
></content-items>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ContentItems from "./content-items"
|
||
|
|
import DefaultSelectInput from "./default-select-input"
|
||
|
|
const modeEnum = {
|
||
|
|
sheet: 'sheet',
|
||
|
|
drop: 'drop'
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
// computed: {
|
||
|
|
// filDataList() {
|
||
|
|
// return []
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
components: {
|
||
|
|
ContentItems, DefaultSelectInput
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
isWhite: {},
|
||
|
|
customInput: {
|
||
|
|
default () {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
minChecked: {
|
||
|
|
default () {
|
||
|
|
return 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
default () {
|
||
|
|
return "single"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
default () {
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
default () {
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mode: {
|
||
|
|
default () {
|
||
|
|
return modeEnum.sheet
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
value: {
|
||
|
|
default () {
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
list: {
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show: false,
|
||
|
|
modeEnum: Object.assign({}, modeEnum)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onHide() {
|
||
|
|
|
||
|
|
},
|
||
|
|
destroyed() {},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleSelectSwitch() {
|
||
|
|
// this.$emit('update:show', !this.show)
|
||
|
|
this.show = !this.show
|
||
|
|
},
|
||
|
|
handleDataItemChange(val) {
|
||
|
|
this.$emit('onChange', val)
|
||
|
|
this.$emit('update:value', val)
|
||
|
|
if(this.type == "single") {
|
||
|
|
this.handleSelectSwitch()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.md-drop-cont{
|
||
|
|
position: absolute;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
border: 2rpx solid #ebeef5;;
|
||
|
|
top: calc(100% + 8px);
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 10;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||
|
|
}
|
||
|
|
</style>
|