206 lines
3.7 KiB
Vue
206 lines
3.7 KiB
Vue
<template>
|
|
<view class="popup-picker" v-if="show">
|
|
<!-- 遮罩层 -->
|
|
<view class="popup-mask" v-if="show" :class="{ show: show }" @click="handleClose"></view>
|
|
|
|
<!-- 选择器内容 -->
|
|
<view class="popup-content" :class="{ show: show }">
|
|
<!-- 头部 -->
|
|
<view class="popup-header">
|
|
<text class="cancel" @click="handleClose">取消</text>
|
|
<text class="title">{{title}}</text>
|
|
<text class="confirm" @click="handleConfirm">确定</text>
|
|
</view>
|
|
|
|
<!-- 选择器 -->
|
|
<picker-view
|
|
:value="currentValue"
|
|
@change="handleChange"
|
|
class="picker-view"
|
|
>
|
|
<picker-view-column v-for="(column, index) in columns" :key="index">
|
|
<view
|
|
class="picker-item"
|
|
v-for="(item, itemIndex) in column"
|
|
:key="item.id"
|
|
>
|
|
{{item[labelKey] || item.title}}
|
|
</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PopupPicker',
|
|
props: {
|
|
// 是否显示
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 标题
|
|
title: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
// 选项数据
|
|
columns: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 当前选中的值
|
|
value: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 选项的标签字段
|
|
labelKey: {
|
|
type: String,
|
|
default: 'label'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentValue: this.value
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
this.currentValue = val
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理选择变化
|
|
handleChange(e) {
|
|
this.currentValue = e.detail.value;
|
|
},
|
|
|
|
// 处理关闭
|
|
handleClose() {
|
|
this.$emit('close')
|
|
setTimeout(() => {
|
|
this.show = false
|
|
}, 300)
|
|
},
|
|
|
|
// 处理确认
|
|
handleConfirm() {
|
|
const selectedItems = this.currentValue.map((value, index) => {
|
|
const column = this.columns[index]
|
|
return column[value]
|
|
})
|
|
this.$emit('confirm', {
|
|
value: this.currentValue,
|
|
items: selectedItems
|
|
})
|
|
this.handleClose()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.popup-picker {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* 遮罩层 */
|
|
.popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.popup-mask.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 内容区 */
|
|
.popup-content {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.popup-content.show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* 头部 */
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
}
|
|
|
|
.cancel {
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.confirm {
|
|
font-size: 32rpx;
|
|
color: #4080FF;
|
|
}
|
|
|
|
/* 选择器 */
|
|
.picker-view {
|
|
width: 100%;
|
|
height: 480rpx;
|
|
}
|
|
|
|
.picker-item {
|
|
line-height: 68rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
/* 平台适配 */
|
|
/* #ifdef H5 */
|
|
.popup-content {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
/* #endif */
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
.popup-content {
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
/* #endif */
|
|
</style> |