115 lines
2.6 KiB
Plaintext
115 lines
2.6 KiB
Plaintext
<template>
|
||
<view>
|
||
<button @click="openPicker">选择性别</button>
|
||
<view v-if="showPicker" class="picker-modal">
|
||
<picker-view
|
||
class="picker-view"
|
||
:value="tempGenderIndex"
|
||
:indicator-style="'height: 50px;'"
|
||
@change="onPickerChange"
|
||
>
|
||
<picker-view-column>
|
||
<view v-for="(g, idx) in genderOptions" :key="g" class="picker-item">{{ g }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
<view class="picker-actions">
|
||
<button @click="showPicker = false">取消</button>
|
||
<button @click="confirmGender">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
export default {
|
||
data() {
|
||
return {
|
||
genderOptions: ['male', 'female', 'other'],
|
||
tempGenderIndex: [0], // 作为 number[]
|
||
selectedGenderIndex: 0,
|
||
showPicker: false
|
||
}
|
||
},
|
||
methods: {
|
||
openPicker() {
|
||
// 确保弹窗显示前索引合<E5BC95>?
|
||
const idx = (this.selectedGenderIndex >= 0 && this.selectedGenderIndex < this.genderOptions.length)
|
||
? this.selectedGenderIndex : 0;
|
||
this.tempGenderIndex = [idx];
|
||
this.showPicker = true;
|
||
},
|
||
onPickerChange(e: UniPickerViewChangeEvent) {
|
||
const idx = e.detail.value[0];
|
||
// 兜底保护，防止越<E6ADA2>?
|
||
this.tempGenderIndex = [(idx >= 0 && idx < this.genderOptions.length) ? idx : 0];
|
||
},
|
||
confirmGender() {
|
||
this.selectedGenderIndex = this.tempGenderIndex[0];
|
||
this.showPicker = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.picker-modal {
|
||
position: fixed;
|
||
left: 0; right: 0; bottom: 0;
|
||
background: #fff;
|
||
z-index: 1000;
|
||
box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
|
||
padding-bottom: 30rpx;
|
||
width: 100vw;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.picker-view {
|
||
width: 100%;
|
||
min-width: 240px;
|
||
max-width: 100vw;
|
||
height: 320px;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
box-sizing: border-box;
|
||
}
|
||
.picker-view-column {
|
||
flex: 1;
|
||
min-width: 80px;
|
||
max-width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
.picker-item {
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.picker-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100vw;
|
||
padding: 20rpx 40rpx 0 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.picker-actions button {
|
||
flex: 1;
|
||
margin: 0 10rpx;
|
||
background: #2196f3;
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
height: 80rpx;
|
||
border: none;
|
||
}
|
||
</style>
|