1
2
3
4
5
6
7
8
9
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
| <template>
| <el-time-select
| class="pam-time cursor--pointer"
| popper-class="pam-time-popper"
| v-model="timeValue"
| :clearable="false"
| :picker-options="pickerOptions"
| placeholder="選擇時間"
| prefix-icon="icon-down down-icon"
| value-format="timestamp"
| @change="changeTime"
| >
| </el-time-select>
| </template>
|
| <script lang="ts">
| import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
|
| @Component
| export default class UiTimePicker extends Vue {
| timeValue = '';
| pickerOptions = {
| start: '09:00',
| step: '00:15',
| end: '21:00'
| }
|
| @Prop()
| defaultValue!: string;
|
| @Emit('changeTime')
| changeTime() {
| return this.timeValue;
| }
|
| @Watch('defaultValue', {immediate: true})
| updateDefault() {
| if (this.defaultValue) {
| const hours = new Date(this.defaultValue).getHours();
| const minutes = new Date(this.defaultValue).getMinutes();
| this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
| this.changeTime();
| }
| }
| }
| </script>
|
|
