【vue-vant】van-field 、van-datetime-picker、van-switch-cell组件的使用
一、效果图:二、实现:1.首先添加组件:<van-cell-group><van-cell title="单元格" value="内容" /><van-cell title="单元格" value="内容" label="描述信息" /></van-cell-group>然后再在组件中添加<van-popup...
·
一、效果图:
二、实现:
1.首先添加组件:
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
然后再在组件中添加<van-popup>、<van-datetime>这两个组件
<van-popup v-model="showone" position="bottom" :overlay="true">
<van-datetime-picker
v-model="currentDate_end"
type="datetime"
@cancel="showone =false"
@confirm="showone=false"
@change="firstTimeChange"
/>
</van-popup>
2.添加data值
checked: true,
startTime: "",
endTime: "",
showone: false,
showtwo: false,
minHour: 10,
maxHour: 20,
endTimePop: "",
start_Time: "",
end_Time: "",
currentDate_end: "",
currentDate_first: "",
endTimePop: false,
// end_Time:ture
newendtime:true
3.设置方法
showPopupone() {
this.showone = true;
},
showPopuptwo() {
this.showtwo = true;
},
firstTimeChange(e) {
let endTimeArr = e.getValues();
this.start_Time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]} ${
endTimeArr[3]
}:${endTimeArr[4]}:00`;
},
三、<van-switch-cell>的使用
(1)这个时候主要用到了change()方法
(2)设置data值
(3)方法
(4)在结束时间,加上个v-show。
(5)之后,再在方法进行调用。
更多推荐
已为社区贡献3条内容
所有评论(0)