吉光研途前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

158 lines
3.1 KiB

<template>
<view class="drop-down">
<button class="btn" plain @click="openPicker" >
<view class="flex btn-label">
<view :style="{ color }">{{ label }}</view>
<uv-icon name="arrow-down-fill" :color="color" size="14rpx"></uv-icon>
</view>
</button>
<template v-if="popupVisible">
<view class="drop-down-overlay" @click="closePicker"></view>
<view class="card drop-down-popup" :style="popupStyle">
<view
v-for="item in options"
class="flex drop-down-option"
:class="[item.value === value ? 'is-active' : '']"
:key="item.value"
@click="onSelect(item.value)"
>
<text>{{ item.label }}</text>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
props: {
value: {
type: String | Number,
default: null,
},
options: {
type: Array,
default() {
return []
}
},
label: {
type: String,
default: ''
},
},
data() {
return {
popupVisible: false,
popupStyle: {},
}
},
computed: {
isActive() {
return this.options.find(option => option.value === this.value)
},
color() {
return this.isActive ? '#4883F9' : '#000000'
}
},
methods: {
openPicker() {
this.popupVisible = true
return
uni.createSelectorQuery().in(this)
.select('.btn')
.fields({
node: true,
size: true,
rect: true,
})
.exec(async (res) => {
console.log('res', res)
const {
top,
left,
} = res[0]
console.log('top', top, 'left', left)
// this.popupStyle = {
// top: `${parseInt(top)}px`,
// left: `${parseInt(left)}px`,
// }
console.log('popupStyle', this.popupStyle)
this.popupVisible = true
})
},
closePicker() {
this.popupVisible = false
},
onSelect(val) {
const selected = this.value
const newVal = selected === val ? null : val
this.$emit('input', newVal)
this.$emit('change', newVal)
},
},
}
</script>
<style scoped lang="scss">
.drop-down {
position: relative;
clear: both;
.btn {
width: 213rpx;
padding: 27rpx 0;
font-size: 24rpx;
background: transparent;
border: none;
&-label {
column-gap: 9rpx;
}
}
&-overlay {
position: fixed;
width: 100vw;
height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
background: transparent;
bottom: 0;
left: 0;
font-size: 0;
}
&-popup {
position: absolute;
z-index: 99;
width: 213rpx;
background: #FFFFFF;
border-radius: 15rpx;
transform: translateY(-15rpx);
}
&-option {
color: #000000;
font-size: 24rpx;
padding: 7rpx 0;
text-align: center;
&.is-active {
color: #4883F9;
}
& + & {
border-top: 1rpx solid #EFEFEF;
}
}
}
</style>