<!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" @opened="handlePopupOpen">
<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: "",
timeIndex:[0,8,0],
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: {
handlePopupOpen(){
this.$refs.picker.setIndexes(this.timeIndex)
},
onConfirm(picker, values) {
this.showPickers = false;
var nowVal = this.$refs.picker.getValues().join(':')
var reg = /[\u4e00-\u9fa5]/g;
nowVal = nowVal.replace(reg,'')
this.timeIndex = value;
this.time = nowVal;
console.log(this.timeIndex)
},
}
})
</script>
</html>
