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="filDataList" :value="value" :isWhite="isWhite" :customStyle="customStyle"></default-select-input>
		</view>
		
		<view v-if="mode == modeEnum.sheet">
			<tpx-dialog :show="show" :title="placeholder" @onClose="handleSelectSwitch">
				<view style="height: calc(60vh);">
					<tpx-scroll-view :resObject="filResObject" :searchParam="searchParam" :getListFun="getListFun" size="sm" :showLoadedAll="false" @onListChange="onListChange">
						<content-items :value="value" :list="filDataList" :minChecked="minChecked" :type="type" 
							@onChange="handleDataItemChange"
						></content-items>
					</tpx-scroll-view>
				</view>
			</tpx-dialog>
			
		</view>
		
		<view v-if="mode == modeEnum.drop && show" class="md-drop-cont">
			<tpx-scroll-view :maxHeight="dropMaxHeight" :resObject="filResObject" :searchParam="searchParam" :getListFun="getListFun"  size="sm" :showLoadedAll="false" @onListChange="onListChange">
				<content-items :value="value" :list="filDataList" :minChecked="minChecked" :type="type"
					@onChange="handleDataItemChange"
				></content-items>
			</tpx-scroll-view>
		</view>
	</view>
	
</template>

<script>
	import ContentItems from "./content-items"
	import DefaultSelectInput from "./default-select-input"
	import { transListKeyTitle } from "@/common/util"
	import { pageEventNames } from "@/common/enum"
	
	const modeEnum = {
		sheet: 'sheet',
		drop: 'drop'
	}
	
	export default {
		computed: {
			filDataList() {
				let list = (this.getListFun ? this.resObject.list : this.list) || []
				if(this.transKeyVal) {
					list = transListKeyTitle({ ...this.transKeyVal, list: list })
				}
				return list
			},
			filResObject() {
				let res = this.getListFun ? this.resObject : { list: this.list, total: this.list.length }
				return res
			}
		},
		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 ""
				}
			},
			dropMaxHeight: {
				default () {
					return 400
				}
			},
			list: {
				default () {
					return []
				}
			},
			searchParam: {
				default () {
					return {}
				}
			},
			getListFun: {
				default () {
					return null
				}
			},
			resObject: {
				default () {
					return {
						list: []
					}
				}
			},
			transKeyVal: {
				default () {
					return null
					// {
					// 	// valKey: '',
					// 	// titleKey: ''
					// }
				}
			}
		},
		data() {
			return {
				show: false,
				modeEnum: Object.assign({}, modeEnum)
			}
		},
		created() {
			uni.$on(pageEventNames.globalClick, this.handleDocumentClick);
		},
		
		unmounted() {
			uni.$off(pageEventNames.globalClick, 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()
				}
			},
			onListChange(val){
				this.$emit('update:resObject', val)
			}
		}
	} 
</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>