perry-mall/components/drop-downs/drop-down.vue

<template>
	<view>
		<view class="drop-title">{{dropObj.title}}</view>
		<view class="drop-box display-between-center" @tap="tuneUpEv">
			<view>{{activeText}}</view>
			<i class="icon icon-next colpeili flexs" style="transition: all .3s;" :style="{transform: `rotate(${showFrame ? '0' : '90'}deg)`}"></i>
			<view v-if="showFrame" class="drop animated " :class="showFrame?'fadeIn':'fadeOut'">
				<view class="item-title" :class="activeItem==index?'itemActive':'itemMo'"
				 @tap.stop="chooseItem(index,item.id,item.title,dropObj.title)" v-for="(item,index) in dropObj.children" :key="index">
					<view class="clips1">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"drop-down",
		props:{
			dropObj:{
				type:Object,
				default:()=>{
					return {
						title:'颜色',
						children:[
							{
								id:1,
								childrenTitle:'粉色'
							},
							{
								id:1,
								childrenTitle:'蓝色'
							}
						]
					}
				}
			}
		},
		data() {
			return {
				showFrame:false, // 是否显示下拉框
				activeText:'', // 选中的标题
				activeItem:-1 // 选中的下标
			};
		},
		mounted() {
			if(this.dropObj.children.length){
				this.activeText = `请选择${this.dropObj.title}`;
			} else {
				this.activeText = `暂无可选项`;
			}
		},
		methods:{
			// 选择事件
			chooseItem(index,id,title,mainTitle){
				// 选中的下标
				this.activeItem = index;
				// 选中的标题
				this.activeText = title;
				// 隐藏弹框
				this.showFrame = false;
				this.$emit('chooseItem',{id:id,title:title,mainTitle:mainTitle})
			},
			// 调起选择弹框
			tuneUpEv(){
				if(this.activeText!=`暂无可选项`){
					this.showFrame = !this.showFrame;
				}
			}
		}
	}
</script>

<style scoped>
	.drop-title{font-size: 30rpx;color: #000000;}
	.display-between-center{display: flex;justify-content: space-between;align-items: center;}
	.drop-box{position: relative; border: 1rpx solid #8c8c9b;padding: 20rpx;box-sizing: border-box;margin: 20rpx 0;font-size: 24rpx;color: #000000;}
	.drop{
		position: absolute;top:39px;left: -1rpx;right: -1rpx;z-index: 2;
		max-height: 280rpx;
		overflow: hidden;
		overflow-y: scroll;
		border: 1rpx solid #8c8c9b;
		background-color: #FFFFFF;
	}
	.itemActive{background-color: #000000;color: #FFFFFF;}
	.itemMo{background-color: #FFFFFF;color: #000000;}
	.item-title{padding: 20rpx;}
</style>