效果
选择前效果
1、时间选择器
2、日期选择器
3、普通选择器
4、多列选择器
选择后效果
代码
<template><!-- 时间选择器 --><view class="line"><view class='item1'><view class='left'>时间</view><view class="right"><picker mode="time" :value="selectedTime" @change="onTimeChange"><view class="picker">{{selectedTime}}</view></picker></view></view></view><!-- 日期选择器 --><view class="line"><view class='item1'><view class='left'>日期</view><view class="right"><picker mode="date" :value="selectedDate" @change="onDateChange"><view class="picker">{{selectedDate}}</view></picker></view></view></view><!-- 基本选择器 --><view class="line"><view class='item1'><view class='left'>普通选择</view><view class="right"><picker mode="selector" :range="options" @change="onSelectorChange"><view class="picker">{{selectedOption}}</view></picker></view></view></view><!-- 多列选择器 --><view class="line"><view class='item1'><view class='left'>多列选择</view><view class="right"><picker mode="multiSelector" :range="multiOptions" @change="onMultiSelectorChange"><view class="picker">{{selectedMultiOption.join(' - ')}}</view></picker></view></view></view>
</template><script>export default {data() {return {//选择的时间selectedTime: '请选择',//选择的日期selectedDate: '请选择',//普通选择器options: ['子项1', '子项2', '子项3'],selectedOption: '请选择',//多列选择器multiOptions: [['选项1', '选项2', '选项3'], // 第一列选项['A', 'B', 'C'] // 第二列选项],selectedMultiOption: ['请选择', '请选择'], // 当前选中的选项}},onLoad() {},methods: {// 时间选择器值改变时触发onTimeChange(event) {this.selectedTime = event.detail.value;console.log('选择的时间：', this.selectedTime);},// 日期选择器改变时触发onDateChange(event) {this.selectedDate = event.detail.value;console.log('选择的日期：', this.selectedTime);},// 普通选择器改变时触发onSelectorChange: function(e) {console.log('picker发送选择改变，携带下标为', e.detail.value)console.log('选怎的自定义列表值' + this.options[e.detail.value])this.selectedOption = this.options[e.detail.value];},// 多列选择器改变时触发onMultiSelectorChange(event) {const values = event.detail.value; // 选中的下标数组this.selectedMultiOption = [this.multiOptions[0][values[0]], // 第一列选中的值this.multiOptions[1][values[1]] // 第二列选中的值];console.log('选中的选项：', this.selectedMultiOption);},}}
</script><style>.line {display: flex;justify-content: center;align-items: center;margin-top: 5%;}.item1 {display: flex;height: 80rpx;width: 85%;border: 2px solid rgb(144, 200, 226);}.left {width: 30%;font-size: 16px;display: flex;align-items: center;padding-left: 2%;}.right {font-size: 15px;color: rgb(83, 83, 83);width: 70%;/* border:1px solid black; */text-align: right;/* font-size: 18px; */padding-right: 2%;}.right text {font-size: 18px;margin-left: 2%;}.right input {width: 100%;/* border:1px solid black; */}.picker {width: 100%;text-align: right;height: 80rpx;display: flex;align-items: center;justify-content: flex-end;}
</style>
