Blame view

src/components/date-picker/panel/time.vue 2.54 KB
9d844d53   梁灏   fixed Layout bug
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  <template>
      <div :class="[prefixCls + '-body-wrapper']">
          <div :class="[prefixCls + '-body']">
              <div :class="[prefixCls + '-content']">
                  <time-spinner
                      :show-seconds="showSeconds"
                      :hours="hours"
                      :minutes="minutes"
                      :seconds="seconds"
                      @on-change="handleChange"
                      @on-pick-click="handlePickClick"></time-spinner>
              </div>
              <Confirm
                  @on-pick-clear="handlePickClear"
                  @on-pick-success="handlePickSuccess"></Confirm>
          </div>
      </div>
  </template>
  <script>
      import TimeSpinner from '../base/time-spinner.vue';
      import Confirm from '../base/confirm.vue';
  
      import Mixin from './mixin';
  
      const prefixCls = 'ivu-picker-panel';
      const timePrefixCls = 'ivu-time-picker';
  
      export default {
          mixins: [Mixin],
          components: { TimeSpinner, Confirm },
          data () {
              return {
                  prefixCls: prefixCls,
                  timePrefixCls: timePrefixCls,
                  format: 'HH:mm:ss',
                  date: new Date(),
                  value: '',
                  hours: 0,
                  minutes: 0,
                  seconds: 0
              };
          },
          computed: {
              showSeconds () {
                  return (this.format || '').indexOf('ss') !== -1;
              }
          },
          watch: {
              value (newVal) {
                  if (!newVal) return;
                  newVal = new Date(newVal);
                  if (!isNaN(newVal)) {
                      this.handleChange({
                          hours: date.getHours(),
                          minutes: date.getMinutes(),
                          seconds: date.getSeconds()
                      });
                      this.$nextTick(_ => this.scrollTop());
                  }
              }
          },
          methods: {
              handleChange (date) {
                  if (date.hours !== undefined) {
                      this.date.setHours(date.hours);
                      this.hours = this.date.getHours();
                  }
                  if (date.minutes !== undefined) {
                      this.date.setMinutes(date.minutes);
                      this.minutes = this.date.getMinutes();
                  }
                  if (date.seconds !== undefined) {
                      this.date.setSeconds(date.seconds);
                      this.seconds = this.date.getSeconds();
                  }
              },
              scrollTop () {
  
              }
          }
      };
  </script>