android-cloud-H5/components/Dropdown/Dropdown.vue

<template>
	<div class="dropdown pre">
		<!-- 触发区 -->
		<div @click.stop="visible = true" class="dropdown-trigger">
			<slot></slot>
		</div>
		<!-- 遮罩 -->
		<div class="pfi" @click="visible = false" v-if="visible" :style="[maskStyle]"></div>
		<!-- 下拉菜单 -->
		<template v-if="visible">
			<div :class="['dropdown-menu pab', visible ? 'animation-fade' : '']" :style="[dropdownMenuStyle]">
				<slot name="dropdown-menu">
					<template v-if="list.length">
						<div :class="['dropdown-menu-item tc', {line: index !== 0, active: isActvie && item[defaultprop.value] === value}]" :style="isActvie && item[defaultprop.value] === value ? activeStyle : {}" v-for="(item, index) in list" :key="item[defaultprop.value]" @click="change(item)">
							<span class="menu-name">{{ item[defaultprop.label] }}</span>
						</div>
					</template>
				</slot>
			</div>
		</template>
		
	</div>
</template>

<script>
	export default {
		name: 'dropdown',
		props: {
			// 下拉框数据
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 替换回显以及key字段
			prop: {
				type: Object,
				default: () => {
					return {}
				}
			},
			dropdownMenuStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			value: {
				type: [String, Number],
				default: ''
			},
			// 下拉菜单是否激活选中项
			isActvie: {
				type: Boolean,
				default: false
			},
			// 下拉菜单选中时的样式
			activeStyle: {
				type: [Object, Array],
				default: () => ({})
			}
		},
		data() {
			return {
				// 下拉框及遮罩是否显示
				visible: false,
				// 默认的prop
				defaultprop: {
					label: 'label',
					icon: 'icon',
					value: 'value'
				},
        // 屏幕高度
			  windowHeight: 0,
			}
		},
		mounted() {
      // 获取屏幕高度
      this.windowHeight = window.innerHeight;

			// 如果有自定义的prop，那么就直接替换
			if (Object.keys(this.prop).length) Object.assign(this.defaultprop, this.prop)
		},
		watch: {
			visible(val) {
        // 监听visible的变化
				this.$emit('visible', val)
			}
		},
		computed: {
			maskStyle() {
				return {
					height: this.windowHeight + 'px',
					width: '100vw'
				}
			}
		},
		methods: {
			change(data) {
				this.visible = false
				this.$emit('input', data[this.defaultprop.value])
				this.$emit('change', data[this.defaultprop.value])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pre {
		position: relative;
	}
	.pab {
    position: absolute;
	}

	.dropdown-menu {
		min-width: 120px;
		background-color: #2C2C2D;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
		animation-duration: .2s !important;
		z-index: 2501;
		padding: 0 12px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #FFF;
		line-height: 18px;
		text-align: left;
		font-style: normal;
		border-radius: 8px;

		.dropdown-menu-item {
			display: flex;
			align-items: center;
			padding: 12px 0;

			.menu-name {
				flex: 1;
			}
		}
	}

	.pfi {
		left: 0px;
		top: 0px;
		z-index: 2500;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
	}

	.active {
		color: #3666F2;
	}
</style>