emis-app/components/tpx-select/tpx-select.vue

<template>
	<view class="" style="position: relative;">
		<view @click.stop="handleSelectSwitch">
			<slot v-if="customInput"></slot>
			<default-select-input v-if="!customInput" :placeholder="placeholder" :show="show" :list="list" :value="value" :isWhite="isWhite" :customStyle="customStyle"></default-select-input>
		</view>
		
		<view v-if="mode == modeEnum.sheet">
			<tpx-dialog :show="show" :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: {
				default () {
					return false
				}
			},
			customStyle: {
				default () {
					return ''
				}
			},
			customInput: {
				default () {
					return false
				}
			},
			minChecked: {
				default () {
					return 1
				}
			},
			type: {
				default () {
					return "single"
				}
			},
			placeholder: {
				default () {
					return "请选择"
				}
			},
			mode: {
				default () {
					return modeEnum.sheet
				}
			},
			
			value: {
				default () {
					return ""
				}
			},
			list: {
				default () {
					return []
				}
			}
		},
		data() {
			return {
				show: false,
				modeEnum: Object.assign({}, modeEnum)
			}
		},
		created() {
			document.addEventListener('click', this.handleDocumentClick)
		},
		
		unmounted() {
			document.removeEventListener('click', this.handleDocumentClick)
		},

		methods: {
			handleDocumentClick(){
				this.show = false
			},
			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>