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

91 lines
2.4 KiB
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>