sadjv3_jishi/pages/my/scrollbarPicker.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>