drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use native w3c

Browse source
This commit is contained in:
Xotic750 2018-01-20 23:57:42 +01:00
parent 36d2470132
commit 7996459687
4 changed files with 79 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/radio/radio.vue
View file

@ -1,20 +1,18 @@
<template>
<label
:class="wrapClasses"
:tabindex="disabled || group ? -1 : 0">
<label :class="wrapClasses" ref="label">
<span :class="radioClasses">
<span :class="innerClasses"></span>
<span :class="innerClasses" ref="inner"></span>
<input
type="radio"
tabindex="-1"
:class="inputClasses"
:disabled="disabled"
:checked="currentValue"
:name="name"
:name="groupName"
@change="change"
@focus="$el.focus()"
>
</span><slot>{{ label }}</slot>
@focus="onFocus"
@blur="onBlur">
</span>
<slot>{{ label }}</slot>
</label>
</template>
<script>
@ -59,7 +57,10 @@
return {
currentValue: this.value,
group: false,
parent: findComponentUpward(this, 'RadioGroup')
groupName: this.name,
parent: findComponentUpward(this, 'RadioGroup'),
focusWrapper: false,
focusInner: false
};
},
computed: {
@ -70,7 +71,8 @@
[`${prefixCls}-group-item`]: this.group,
[`${prefixCls}-wrapper-checked`]: this.currentValue,
[`${prefixCls}-wrapper-disabled`]: this.disabled,
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-focus`]: this.focusWrapper
}
];
},
@ -84,18 +86,33 @@
];
},
innerClasses () {
return `${prefixCls}-inner`;
return [
`${prefixCls}-inner`,
{
[`${prefixCls}-focus`]: this.focusInner
}
];
},
inputClasses () {
return `${prefixCls}-input`;
}
},
mounted () {
if (this.parent) this.group = true;
if (!this.group) {
this.updateValue();
} else {
if (this.parent) {
this.group = true;
if (this.name && this.name !== this.parent.name) {
if (console.warn) {
console.warn('[iview] Name does not match Radio Group name.');
}
} else {
this.groupName = this.parent.name;
}
}
if (this.group) {
this.parent.updateValue();
} else {
this.updateValue();
}
},
methods: {
@ -107,30 +124,43 @@
const checked = event.target.checked;
this.currentValue = checked;
let value = checked ? this.trueValue : this.falseValue;
const value = checked ? this.trueValue : this.falseValue;
this.$emit('input', value);
if (this.group && this.label !== undefined) {
this.parent.change({
value: this.label,
checked: this.value
});
}
if (!this.group) {
if (this.group) {
if (this.label !== undefined) {
this.parent.change({
value: this.label,
checked: this.value
});
}
} else {
this.$emit('on-change', value);
this.dispatch('FormItem', 'on-form-change', value);
}
},
updateValue () {
this.currentValue = this.value === this.trueValue;
},
onBlur () {
this.focusWrapper = false;
this.focusInner = false;
},
onFocus () {
if (this.group && this.parent.type === 'button') {
this.focusWrapper = true;
} else {
this.focusInner = true;
}
}
},
watch: {
value (val) {
if (val !== this.trueValue && val !== this.falseValue) {
if (val === this.trueValue || val === this.falseValue) {
this.updateValue();
} else {
throw 'Value should be trueValue or falseValue.';
}
this.updateValue();
}
}
};