125 lines
1.6 KiB
Vue
125 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm"
|
|
:visible.sync="pickerVisible" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VuePicker from 'vue-pickers'
|
|
const tdata = [{
|
|
label: '00',
|
|
},
|
|
{
|
|
label: '01',
|
|
},
|
|
{
|
|
label: '02',
|
|
},
|
|
{
|
|
label: '03',
|
|
},
|
|
{
|
|
label: '04',
|
|
},
|
|
{
|
|
label: '05',
|
|
},
|
|
{
|
|
label: '06',
|
|
},
|
|
{
|
|
label: '07',
|
|
},
|
|
{
|
|
label: '08',
|
|
},
|
|
{
|
|
label: '09',
|
|
},
|
|
{
|
|
label: '10',
|
|
},
|
|
{
|
|
label: '11',
|
|
},
|
|
{
|
|
label: '12',
|
|
},
|
|
{
|
|
label: '13',
|
|
},
|
|
{
|
|
label: '14',
|
|
},
|
|
{
|
|
label: '15',
|
|
},
|
|
{
|
|
label: '16',
|
|
},
|
|
{
|
|
label: '17',
|
|
},
|
|
{
|
|
label: '18',
|
|
},
|
|
{
|
|
label: '19',
|
|
},
|
|
{
|
|
label: '20',
|
|
},
|
|
{
|
|
label: '21',
|
|
},
|
|
{
|
|
label: '22',
|
|
},
|
|
{
|
|
label: '23',
|
|
},
|
|
]
|
|
var tdata2 = [{
|
|
label: '00',
|
|
},
|
|
{
|
|
label: '30',
|
|
},
|
|
]
|
|
|
|
export default {
|
|
components: {
|
|
VuePicker
|
|
},
|
|
props: {
|
|
visibleShow: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
pickData: [
|
|
tdata,
|
|
tdata2
|
|
],
|
|
pickerVisible: false,
|
|
result: ''
|
|
}
|
|
},
|
|
watch: {
|
|
visibleShow(val) {
|
|
this.pickerVisible = val
|
|
}
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.result = 'click cancel result: null'
|
|
this.$emit('update:visibleShow', false);
|
|
},
|
|
confirm(res) {
|
|
//console.log("this.result",res[0].label)
|
|
this.$emit('update:visibleShow', false);
|
|
this.$emit('Time', `${res[0].label}:${res[1].label}`);
|
|
}
|
|
}
|
|
}
|
|
</script> |