Blame view

ant-design-vue-jeecg/src/components/jeecg/JTime.vue 1.42 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
<template>
  <a-time-picker
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    :value="momVal"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    @change="handleTimeChange"/>
</template>

<script>
肖超群 authored
12
13
14
15
16
17
18
19
20
import moment from 'moment'

export default {
  name: 'JTime',
  props: {
    placeholder: {
      type: String,
      default: '',
      required: false
肖超群 authored
21
    },
肖超群 authored
22
23
24
    value: {
      type: String,
      required: false
肖超群 authored
25
    },
肖超群 authored
26
27
28
29
    dateFormat: {
      type: String,
      default: 'HH:mm:ss',
      required: false
肖超群 authored
30
    },
肖超群 authored
31
32
33
34
    readOnly: {
      type: Boolean,
      required: false,
      default: false
肖超群 authored
35
    },
肖超群 authored
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    getCalendarContainer: {
      type: Function,
      default: (node) => node.parentNode
    }
  },
  data() {
    let timeStr = this.value;
    return {
      decorator: "",
      momVal: !timeStr ? null : moment(timeStr, this.dateFormat)
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.momVal = null
      } else {
        this.momVal = moment(val, this.dateFormat)
      }
    }
  },
  methods: {
    moment,
    handleTimeChange(mom, timeStr) {
      this.$emit('change', timeStr);
肖超群 authored
66
    }
肖超群 authored
67
68
69
70
71
  },
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: 'value',
    event: 'change'
肖超群 authored
72
  }
肖超群 authored
73
}
肖超群 authored
74
75
76
77
78
</script>

<style scoped>

</style>