ycwh/miniapp/pages/components/dropdown.vue

<template>
<u-overlay :show="isShow" @click="isShow = false" opacity="0">
	<view :class="'k-' + position" :style="[myStyle]">
		<slot/>
	</view>
</u-overlay>
</template>

<script>
export default {
	props: {
		top: {
			type: [String, Number],
			default: 0,
		},
		position: {
			type: String,
			default: 'right',//left
		},
		left: {
			type: [String, Number],
			default: 0,
		},
		right: {
			type: [String, Number],
			default: 0,
		},
	},
	computed: {
	    myStyle() {
			return {
				marginTop: this.$u.addUnit(this.top, 'px'),
				marginLeft: this.$u.addUnit(this.left, 'px'),
				marginRight: this.$u.addUnit(this.right, 'px'),
			}
		},
	},
	data() {
		return {
			isShow: false,
		}
	},
	methods: {
		show() {
			this.isShow = true
		},
		hide() {
			this.isShow = false
		},
	},
}
</script>

<style>
.k-top {
	background-color: #333333;
	width: fit-content;
}
.k-left {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.k-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
</style>