type="bottom"
>
<view class="custom-picker-popup">
<view class="page-header">
<view class="page-header-content-text">{{ title }}</view>
<view class="close-icon" @click="onCancel">
<custom-icon
icon="/static/images/psychological-test/icon-closelist@2x.png"
size="24rpx"
/>
</view>
</view>
<view class="page-content">
<picker-view value="[insideSelectedIndex]" @change="onPickerViewChange"
indicator-style="height: 112rpx"
class="picker-view"
>
<picker-view-column>
<view
class="picker-view-item"
v-for="(item, index) in options" key="index" >
{{ item.label }}
</view>
</picker-view-column>
</picker-view>
</view>
<view class="page-footer">
<button @click="onOk">确定</button>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
const emit = defineEmits([
'update:visible',
'update:selectedValue',
'change',
'ok',
'cancel',
])
const props = defineProps({
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
selectedValue: {
type: [String, Number],
default: 0,
},
options: {
type: Array,
default: () => [],
},
isRow: {
type: Boolean,
default: false,
},
})
const popupRef = ref()
const insideVisible = ref(false)
const insideSelectedIndex = ref(undefined)
const findSelectedIndex = (value) => {
const resIndex = props.options.findIndex((item) => item.value === value)
return resIndex > -1 ? resIndex : 0
}
watch(
[() => props.visible],
([newval]) => {
console.log('props: ', props)
insideVisible.value = newval
},
{ immediate: true }
)
watch([() => insideVisible.value], ([newval]) => {
if (!popupRef.value) return
if (newval) open()
else close()
})
watch(
[() => props.selectedValue],
([newval]) => {
insideSelectedIndex.value = findSelectedIndex(newval)
},
{ immediate: true }
)
watch([() => insideSelectedIndex.value], ([newval]) => {
emit('update:selectedValue', props.options[newval].value)
emit('change', props.options[newval].value)
})
const computedSelectedValue = () => {
const row = props.options[insideSelectedIndex.value]
const res = props.isRow ? row : row?.value
return res
}
const onPickerViewChange = (e) => {
const val = e.detail.value
insideSelectedIndex.value = val[0]
}
const open = () => {
popupRef.value.open()
}
const close = () => {
popupRef.value.close()
}
const onOk = () => {
emit('ok', computedSelectedValue())
}
const onCancel = () => {
emit('cancel')
}
</script>
<style lang="scss" scoped>
.custom-picker-popup {
border-radius: 36rpx 36rpx 0rpx 0rpx;
padding: 28rpx 0 0 0;
background-color: #fff;
.page-header {
position: relative;
margin: 0 34rpx 56rpx;
display: flex;
align-items: center;
.page-header-content-text {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
font-size: 36rpx;
color: #131313;
}
.close-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 34rpx;
display: flex;
}
}
.page-content {
margin-bottom: 26rpx;
height: 508rpx;
.picker-view {
height: 508rpx;
.picker-view-item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
}
}
.page-footer {
margin: 0 32rpx;
padding-bottom: 20rpx;
button {
border: none;
height: 88rpx;
background: linear-gradient(90deg, #957ffe 0%, #bf9be8 100%);
border-radius: 44rpx 44rpx 44rpx 44rpx;
font-size: 32rpx;
color: #ffffff;
}
}
}
</style>
1 个回复
2***@qq.com
官方的这个组件,就是因为更新不及时问题,我们都自己写了一个picker