miniprogram-jituan/detail/select.vue

<template>
	<view>
		<view class="select">
			<view class="slect_list" :style="'top:-' + (props.list.length) * 2.55 + 'em'">
				<view v-if="props.fOpen" :class="{list_item: true, list_item_act: props.fOpen}"
					v-for="(v,i) in props.list" :key="'select-'+ i" v-text="v.text" @click="()=>change(v)"></view>
			</view>
			<view class="text" v-text="props.btnText || '请选择'" @click="show"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		ref
	} from "vue";
	const props = defineProps({
		btnText: String,
		list: Array,
		url: String,
		fOpen: Boolean
	});
	const emits = defineEmits(['open', 'change']);

	function change(v) {
		emits("open");
		emits("change", v.value);
	}
	
	function show() {
		props.url ? emits('change', props.url) : emits('open');
	}
</script>

<style lang="scss">
	.select {
		position: relative;
		display: inline-block;
		width: 90%;
		margin: 0 .5em;
		text-align: center;
		border-radius: 5px;
		background-color: #b5bdc3;
		line-height: 2.5em;
		color: #fff;

		.slect_list {
			position: absolute;
			width: 100%;
			background-color: #b5bdc3;
			text-align: center;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;

			.list_item {
				line-height: 2.5em;
				text-align: center;
				height: 0;
				transition: all .2s;
				width: 100%;
				border-bottom: 1px solid #eee;
			}

			.list_item_act {
				height: 2.5em;
			}

		}
	}
</style>