Blame view

node_modules/element-ui/packages/radio/src/radio.vue 3.06 KB
2a09d1a4   liuqimichale   添加宜春 天水 宣化
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
  <template>
    <label
      class="el-radio"
      :class="[
        border && radioSize ? 'el-radio--' + radioSize : '',
        { 'is-disabled': isDisabled },
        { 'is-focus': focus },
        { 'is-bordered': border },
        { 'is-checked': model === label }
      ]"
      role="radio"
      :aria-checked="model === label"
      :aria-disabled="isDisabled"
      :tabindex="tabIndex"
      @keydown.space.stop.prevent="model = isDisabled ? model : label"
    >
      <span class="el-radio__input"
        :class="{
          'is-disabled': isDisabled,
          'is-checked': model === label
        }"
      >
        <span class="el-radio__inner"></span>
        <input
          class="el-radio__original"
          :value="label"
          type="radio"
          aria-hidden="true"
          v-model="model"
          @focus="focus = true"
          @blur="focus = false"
          @change="handleChange"
          :name="name"
          :disabled="isDisabled"
          tabindex="-1"
        >
      </span>
      <span class="el-radio__label" @keydown.stop>
        <slot></slot>
        <template v-if="!$slots.default">{{label}}</template>
      </span>
    </label>
  </template>
  <script>
    import Emitter from 'element-ui/src/mixins/emitter';
  
    export default {
      name: 'ElRadio',
  
      mixins: [Emitter],
  
      inject: {
        elForm: {
          default: ''
        },
  
        elFormItem: {
          default: ''
        }
      },
  
      componentName: 'ElRadio',
  
      props: {
        value: {},
        label: {},
        disabled: Boolean,
        name: String,
        border: Boolean,
        size: String
      },
  
      data() {
        return {
          focus: false
        };
      },
      computed: {
        isGroup() {
          let parent = this.$parent;
          while (parent) {
            if (parent.$options.componentName !== 'ElRadioGroup') {
              parent = parent.$parent;
            } else {
              this._radioGroup = parent;
              return true;
            }
          }
          return false;
        },
        model: {
          get() {
            return this.isGroup ? this._radioGroup.value : this.value;
          },
          set(val) {
            if (this.isGroup) {
              this.dispatch('ElRadioGroup', 'input', [val]);
            } else {
              this.$emit('input', val);
            }
          }
        },
        _elFormItemSize() {
          return (this.elFormItem || {}).elFormItemSize;
        },
        radioSize() {
          const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
          return this.isGroup
            ? this._radioGroup.radioGroupSize || temRadioSize
            : temRadioSize;
        },
        isDisabled() {
          return this.isGroup
            ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
            : this.disabled || (this.elForm || {}).disabled;
        },
        tabIndex() {
          return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;
        }
      },
  
      methods: {
        handleChange() {
          this.$nextTick(() => {
            this.$emit('change', this.model);
            this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
          });
        }
      }
    };
  </script>