fix radio dynamic init bug (#1514)

pull/1524/head
baiyaaaaa 2016-12-02 17:35:54 +08:00 committed by cinwell.li
parent d3afe22e89
commit e56f52ff26
5 changed files with 50 additions and 51 deletions

View File

@ -103,12 +103,6 @@
falseLabel: [String, Number] falseLabel: [String, Number]
}, },
data() {
return {
isGroup: false
};
},
methods: { methods: {
addToStore() { addToStore() {
if (Array.isArray(this.model)) { if (Array.isArray(this.model)) {

View File

@ -3,33 +3,39 @@
name: 'ElRadioButton', name: 'ElRadioButton',
props: { props: {
label: { label: {},
type: [String, Number],
required: true
},
disabled: Boolean, disabled: Boolean,
name: String name: String
}, },
data() {
return {
size: this.$parent.size
};
},
computed: { computed: {
value: { value: {
get() { get() {
return this.$parent.value; return this._radioGroup.value;
}, },
set(newValue) { set(value) {
this.$parent.$emit('input', newValue); this._radioGroup.$emit('input', value);
} }
}, },
_radioGroup() {
let parent = this.$parent;
while (parent) {
if (parent.$options.componentName !== 'ElRadioGroup') {
parent = parent.$parent;
} else {
return parent;
}
}
return false;
},
activeStyle() { activeStyle() {
return { return {
backgroundColor: this.$parent.fill, backgroundColor: this._radioGroup.fill,
borderColor: this.$parent.fill, borderColor: this._radioGroup.fill,
color: this.$parent.textColor color: this._radioGroup.textColor
}; };
},
size() {
return this._radioGroup.size;
} }
} }
}; };

View File

@ -23,12 +23,8 @@
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value); this.$emit('change', value);
this.broadcast('ElRadio', 'initData', value);
this.dispatch('ElFormItem', 'el.form.change', [this.value]); this.dispatch('ElFormItem', 'el.form.change', [this.value]);
} }
},
mounted() {
this.broadcast('ElRadio', 'initData', this.value);
} }
}; };
</script> </script>

View File

@ -4,14 +4,14 @@
<span class="el-radio__inner" <span class="el-radio__inner"
:class="{ :class="{
'is-disabled': disabled, 'is-disabled': disabled,
'is-checked': store === label, 'is-checked': model === label,
'is-focus': focus 'is-focus': focus
}"></span> }"></span>
<input <input
class="el-radio__original" class="el-radio__original"
:value="label" :value="label"
type="radio" type="radio"
v-model="store" v-model="model"
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
:name="name" :name="name"
@ -34,42 +34,45 @@
componentName: 'ElRadio', componentName: 'ElRadio',
props: { props: {
value: [String, Number], value: {},
label: { label: {},
type: [String, Number],
required: true
},
disabled: Boolean, disabled: Boolean,
name: String name: String
}, },
data() { data() {
return { return {
focus: false, focus: false
isGroup: false,
store: this.value
}; };
}, },
watch: { computed: {
store(store) { isGroup() {
if (this.isGroup) { let parent = this.$parent;
this.dispatch('ElRadioGroup', 'input', store); while (parent) {
} else { if (parent.$options.componentName !== 'ElRadioGroup') {
this.$emit('input', store); parent = parent.$parent;
} else {
this._radioGroup = parent;
return true;
}
} }
return false;
}, },
value(val) { model: {
this.store = val; get() {
} return this.isGroup ? this._radioGroup.value : this.value;
}, },
created() { set(val) {
this.$on('initData', data => { if (this.isGroup) {
this.store = data; this.dispatch('ElRadioGroup', 'input', [val]);
this.isGroup = true; } else {
}); this.$emit('input', val);
}
}
}
} }
}; };
</script> </script>

View File

@ -4,7 +4,7 @@ Function.prototype.bind = require('function-bind');
require('packages/theme-default/src/index.css'); require('packages/theme-default/src/index.css');
// require all test files (files that ends with .spec.js) // require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /tabs\.spec$/); const testsContext = require.context('./specs', true, /\.spec$/);
testsContext.keys().forEach(testsContext); testsContext.keys().forEach(testsContext);
// require all src files except main.js for coverage. // require all src files except main.js for coverage.