凡客诚品网站建设策划书,易企建站,网站开发和设计如何合作,西安注册公司官网效果
选择前效果 1、时间选择器 2、日期选择器 3、普通选择器 4、多列选择器 选择后效果 代码
template!-- 时间选择器 --view classlineview classitem1view classleft时间/viewview classrighttemplate!-- 时间选择器 --view classlineview classitem1view classleft时间/viewview classrightpicker modetime :valueselectedTime changeonTimeChangeview classpicker{{selectedTime}}/view/picker/view/view/view!-- 日期选择器 --view classlineview classitem1view classleft日期/viewview classrightpicker modedate :valueselectedDate changeonDateChangeview classpicker{{selectedDate}}/view/picker/view/view/view!-- 基本选择器 --view classlineview classitem1view classleft普通选择/viewview classrightpicker modeselector :rangeoptions changeonSelectorChangeview classpicker{{selectedOption}}/view/picker/view/view/view!-- 多列选择器 --view classlineview classitem1view classleft多列选择/viewview classrightpicker modemultiSelector :rangemultiOptions changeonMultiSelectorChangeview classpicker{{selectedMultiOption.join( - )}}/view/picker/view/view/view
/templatescriptexport 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);},}}
/scriptstyle.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
