vant 选择时分秒
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时分秒</title>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
<link rel="stylesheet" href="../../js/vant/index.css">
</head>
<body>
<div id="app">
<van-field readonly required clickable :value="time" label="选择时分秒" placeholder="点击选择时间"
@click="showPicker = true"></van-field>
<van-popup v-model="showPicker" round position="bottom">
<van-picker ref="picker" title='选择时分秒' show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false">
</van-picker>
</van-popup>
</div>
</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/vant/vant.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
time: "",
showPicker: false,
// 时分秒 数据
columns: [
{values: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时','12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],},
{values: ['00分', '01分', '02分', '03分', '04分', '05分', '06分', '07分', '08分', '09分', '10分', '11分','12分', '13分', '14分', '15分', '16分', '17分', '18分', '19分', '20分', '21分', '22分', '23分','24分', '25分', '26分', '27分', '28分', '29分', '30分', '31分', '32分', '33分', '34分', '35分','36分', '37分', '38分', '39分', '40分', '41分', '42分', '43分', '44分', '45分', '46分', '47分','48分', '49分', '50分', '51分', '52分', '53分', '54分', '55分', '56分', '57分', '58分', '59分'],},
{values: ['00秒', '01秒', '02秒', '03秒', '04秒', '05秒', '06秒', '07秒', '08秒', '09秒', '10秒', '11秒','12秒', '13秒', '14秒', '15秒', '16秒', '17秒', '18秒', '19秒', '20秒', '21秒', '22秒', '23秒','24秒', '25秒', '26秒', '27秒', '28秒', '29秒', '30秒', '31秒', '32秒', '33秒', '34秒', '35秒','36秒', '37秒', '38秒', '39秒', '40秒', '41秒', '42秒', '43秒', '44秒', '45秒', '46秒', '47秒','48秒', '49秒', '50秒', '51秒', '52秒', '53秒', '54秒', '55秒', '56秒', '57秒', '58秒', '59秒'],}
]
}
},
methods: {
onConfirm(picker, values) {
this.showPicker = false;
var nowVal = this.$refs.picker.getValues().join(':')
var reg = /[\u4e00-\u9fa5]/g;
nowVal = nowVal.replace(reg,'')
this.time = nowVal;
console.log(nowVal)
},
}
})
</script>
</html>
标签：20,vant,22,23,选择,values,nowVal,时分秒,21 来源： https://www.cnblogs.com/JaneLifeBlog/p/15745488.html