91 lines
2.4 KiB
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.childrenTitle)" v-for="(item,index) in dropObj.childrenList" :key="index">
|
|
<view class="clips1">{{item.childrenTitle}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"drop-down",
|
|
props:{
|
|
dropObj:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {
|
|
title:'颜色',
|
|
childrenList:[
|
|
{
|
|
id:1,
|
|
childrenTitle:'粉色'
|
|
},
|
|
{
|
|
id:1,
|
|
childrenTitle:'蓝色'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showFrame:false, // 是否显示下拉框
|
|
activeText:'', // 选中的标题
|
|
activeItem:-1 // 选中的下标
|
|
};
|
|
},
|
|
mounted() {
|
|
if(this.dropObj.childrenList.length){
|
|
this.activeText = `请选择${this.dropObj.title}`;
|
|
} else {
|
|
this.activeText = `暂无可选项`;
|
|
}
|
|
},
|
|
methods:{
|
|
// 选择事件
|
|
chooseItem(index,id,title){
|
|
// 选中的下标
|
|
this.activeItem = index;
|
|
// 选中的标题
|
|
this.activeText = title;
|
|
// 隐藏弹框
|
|
this.showFrame = false;
|
|
this.$emit('chooseItem',{id:id,title:title})
|
|
},
|
|
// 调起选择弹框
|
|
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:34px;left: -4rpx;right: -4rpx;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>
|