Blame view

src/components/switch/switch.vue 1.45 KB
7fa943eb   梁灏   init
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
  <template>
      <span :class="wrapClasses" @click="toggle">
          <span :class="innerClasses">
              <slot name="open" v-if="checked"></slot>
              <slot name="close" v-if="!checked"></slot>
          </span>
      </span>
  </template>
  <script>
      import { oneOf } from '../../utils/assist';
  
      const prefixCls = 'ivu-switch';
  
      export default {
          props: {
              checked: {
                  type: Boolean,
                  default: false
              },
              disabled: {
                  type: Boolean,
                  default: false
              },
              size: {
                  validator (value) {
                      return oneOf(value, ['small']);
                  }
              }
          },
          computed: {
              wrapClasses () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-checked`]: this.checked,
                          [`${prefixCls}-disabled`]: this.disabled,
                          [`${prefixCls}-${this.size}`]: !!this.size
                      }
                  ]
              },
              innerClasses () {
                  return `${prefixCls}-inner`;
              }
          },
          methods: {
              toggle () {
                  if (this.disabled) {
                      return false;
                  }
  
                  this.checked = !this.checked;
                  this.$emit('on-change', this.checked);
              }
          }
      }
  </script>