116 lines
2.2 KiB
Vue
116 lines
2.2 KiB
Vue
<template>
|
|
<view v-if="showDd" class="dropdown">
|
|
<view class="dropdown-mask"
|
|
@click="handlerMask"
|
|
></view>
|
|
<view class="ul">
|
|
<view
|
|
class="li"
|
|
v-for="(item,index) in list"
|
|
:key="index"
|
|
@click="handlerItem(item.name)"
|
|
>
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:() => ([])
|
|
},
|
|
showDd: {
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
handlerItem(value) {
|
|
this.$emit('select',value)
|
|
},
|
|
handlerMask() {
|
|
|
|
this.$emit('close')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
// .dropdown {
|
|
// position: absolute;
|
|
// z-index 100
|
|
// .ul {
|
|
// position relative
|
|
// z-index 101
|
|
// list-style none
|
|
// background-color #fff
|
|
// border-radius 4rpx
|
|
// padding-left 0
|
|
// box-shadow 10rpx 10rpx 20rpx rgba(224, 32, 32, 0.2)
|
|
// .li{
|
|
// color #000
|
|
// padding 20rpx
|
|
// border-bottom 1px solid #E6EAEB
|
|
// font-size 24rpx
|
|
// }
|
|
// li:last-child{
|
|
// border-bottom none
|
|
// }
|
|
// }
|
|
// .dropdown-mask {
|
|
// top 0
|
|
// left 0
|
|
// position fixed
|
|
// width 100vw
|
|
// height 100vh
|
|
// z-index 99
|
|
// touch-action none
|
|
// }
|
|
// }
|
|
|
|
.dropdown{
|
|
// position: absolute;
|
|
z-index:100;
|
|
}
|
|
|
|
.dropdown .ul {
|
|
position:relative;
|
|
z-index:101;
|
|
list-style:none ;
|
|
background-color:#fff;
|
|
border-radius:4rpx;
|
|
padding-left:0;
|
|
box-shadow:10rpx 10rpx 20rpx rgba(224, 32, 32, 0.2);
|
|
}
|
|
|
|
|
|
.dropdown .ul .li{
|
|
color:#000;
|
|
padding:20rpx;
|
|
border-bottom:1px solid #E6EAEB;
|
|
font-size:24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.dropdown .ul li:last-child{
|
|
border-bottom:none;
|
|
}
|
|
|
|
.dropdown .dropdown-mask {
|
|
top:0;
|
|
left:0;
|
|
position:fixed;
|
|
width:100vw;
|
|
height:100vh;
|
|
z-index:99;
|
|
touch-action:none;
|
|
}
|
|
|
|
|
|
</style> |