Blame view

src/components/checkbox/checkbox.vue 3.14 KB
7fa943eb   梁灏   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <template>
      <label :class="wrapClasses">
          <span :class="checkboxClasses">
              <span :class="innerClasses"></span>
              <input
                  v-if="group"
                  type="checkbox"
                  :class="inputClasses"
                  :disabled="disabled"
                  :value="value"
                  v-model="model"
                  @change="change">
              <input
                  v-if="!group"
                  type="checkbox"
                  :class="inputClasses"
                  :disabled="disabled"
                  v-model="checked"
                  @change="change">
          </span>
4997bd42   梁灏   update Transfer
21
          <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
7fa943eb   梁灏   init
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
      </label>
  </template>
  <script>
      const prefixCls = 'ivu-checkbox';
  
      export default {
          props: {
              disabled: {
                  type: Boolean,
                  default: false
              },
              value: {
                  type: [String, Number, Boolean]
              },
              checked: {
                  type: Boolean,
                  default: false
              }
          },
          data () {
              return {
                  model: [],
                  selected: false,
71699f6b   梁灏   optimize Checkbox...
45
46
                  group: false,
                  showSlot: true
b0893113   jingsam   :art: add eslint
47
              };
7fa943eb   梁灏   init
48
49
50
51
52
53
54
55
56
57
          },
          computed: {
              wrapClasses () {
                  return [
                      `${prefixCls}-wrapper`,
                      {
                          [`${prefixCls}-group-item`]: this.group,
                          [`${prefixCls}-wrapper-checked`]: this.selected,
                          [`${prefixCls}-wrapper-disabled`]: this.disabled
                      }
b0893113   jingsam   :art: add eslint
58
                  ];
7fa943eb   梁灏   init
59
60
61
62
63
64
65
66
              },
              checkboxClasses () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-checked`]: this.selected,
                          [`${prefixCls}-disabled`]: this.disabled
                      }
b0893113   jingsam   :art: add eslint
67
                  ];
7fa943eb   梁灏   init
68
69
70
71
72
73
74
75
76
              },
              innerClasses () {
                  return `${prefixCls}-inner`;
              },
              inputClasses () {
                  return `${prefixCls}-input`;
              }
          },
          ready () {
829a2e4c   梁灏   fixed CheckboxGro...
77
              if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
7fa943eb   梁灏   init
78
79
              if (!this.group) {
                  this.updateModel();
71699f6b   梁灏   optimize Checkbox...
80
81
                  if (this.$els.slot && this.$els.slot.innerHTML === '') {
                      this.showSlot = false;
71699f6b   梁灏   optimize Checkbox...
82
                  }
7fa943eb   梁灏   init
83
84
85
86
87
88
89
90
91
92
93
94
95
96
              }
          },
          methods: {
              change (event) {
                  if (this.disabled) {
                      return false;
                  }
  
                  this.selected = event.target.checked;
  
                  if (this.group) {
                      this.$parent.change(this.model);
                  } else {
                      this.$emit('on-change', this.checked);
f65e9be5   梁灏   update checkboxGroup
97
                      this.$dispatch('on-form-change', this.checked);
7fa943eb   梁灏   init
98
99
100
101
102
103
104
105
106
107
108
                  }
              },
              updateModel () {
                  this.selected = this.checked;
              }
          },
          watch: {
              checked () {
                  this.updateModel();
              }
          }
b0893113   jingsam   :art: add eslint
109
110
      };
  </script>