diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md index 3533ea543..e1dc90337 100644 --- a/examples/docs/en-US/radio.md +++ b/examples/docs/en-US/radio.md @@ -137,6 +137,12 @@ label | the value of radio | string/number/boolean | — | — disabled | whether radio is disabled | boolean | — | false name | native 'name' attribute | string | — | — +### Radio Events + +| Event Name | Description | Parameters | +| --- | --- | --- | +| change | triggers when the bound value changes | the label value of the chosen radio | + ### Radio-group Attributes Attribute | Description | Type | Accepted Values | Default @@ -148,8 +154,8 @@ text-color | font color when button is active | string | — | #ffffff | ### Radio-group Events | Event Name | Description | Parameters | ---- | --- | --- -change | triggers when the bound value changes | the label value of the chosen radio +| --- | --- | --- | +| change | triggers when the bound value changes | the label value of the chosen radio | ### Radio-button Attributes diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md index 858135bd1..795fe8bc3 100644 --- a/examples/docs/zh-CN/radio.md +++ b/examples/docs/zh-CN/radio.md @@ -141,6 +141,11 @@ | disabled | 是否禁用 | boolean | — | false | | name | 原生 name 属性 | string | — | — | +### Radio Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 | + ### Radio-group Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue index 0f995f15e..372e80ae0 100644 --- a/packages/radio/src/radio-button.vue +++ b/packages/radio/src/radio-button.vue @@ -18,6 +18,7 @@ type="radio" v-model="value" :name="name" + @change="handleChange" :disabled="isDisabled" tabindex="-1" > @@ -28,9 +29,13 @@ diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 731a04358..82aea48e5 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -30,6 +30,11 @@ textColor: String, disabled: Boolean }, + created() { + this.$on('handleChange', value => { + this.$emit('change', value); + }); + }, mounted() { // 当radioGroup没有默认选项时，第一个可以选中Tab导航 let radios = this.$el.querySelectorAll('[type=radio]'); @@ -73,7 +78,6 @@ }, watch: { value(value) { - this.$emit('change', value); this.dispatch('ElFormItem', 'el.form.change', [this.value]); } } diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue index 621d7d58c..796ebb115 100644 --- a/packages/radio/src/radio.vue +++ b/packages/radio/src/radio.vue @@ -22,6 +22,7 @@ v-model="model" @focus="focus = true" @blur="focus = false" + @change="handleChange" :name="name" :disabled="isDisabled" tabindex="-1" @@ -89,6 +90,15 @@ tabIndex() { return !this.isDisabled ? (this.isGroup ? (this.model === this.label ? 0 : -1) : 0) : -1; } + }, + + methods: { + handleChange() { + this.$nextTick(() => { + this.$emit('change', this.model); + this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model); + }); + } } }; diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js index c242cec16..c8f42ded1 100644 --- a/test/unit/specs/radio.spec.js +++ b/test/unit/specs/radio.spec.js @@ -50,6 +50,63 @@ describe('Radio', () => { done(); }); }); + it('change event', done => { + vm = createVue({ + template: ` + + + `, + data() { + return { + radio: '', + data: '' + }; + }, + methods: { + handleChange(val) { + this.data = val; + } + } + }, true); + let radioElm = vm.$el; + radioElm.click(); + setTimeout(_ => { + expect(vm.data).to.equal('3'); + done(); + }, 10); + }); + it('change event only triggers on user input', done => { + vm = createVue({ + template: ` + + + `, + data() { + return { + radio: '', + data: '' + }; + }, + methods: { + handleChange(val) { + this.data = val; + } + } + }, true); + vm.radio = '3'; + setTimeout(_ => { + expect(vm.data).to.equal(''); + done(); + }, 10); + }); describe('Radio group', () => { it('create', done => { vm = createVue({ @@ -102,6 +159,61 @@ describe('Radio', () => { done(); }); }); + it('change event', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + methods: { + onChange(val) { + this.data = val; + } + }, + data() { + return { + radio: 3, + data: 0 + }; + } + }, true); + let radio2 = vm.$refs.radio2; + radio2.$el.click(); + setTimeout(_ => { + expect(vm.data).to.equal(6); + done(); + }, 10); + }); + it('change event only triggers on user input', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + methods: { + onChange(val) { + this.data = val; + } + }, + data() { + return { + radio: 3, + data: 0 + }; + } + }, true); + vm.radio = 6; + setTimeout(_ => { + expect(vm.data).to.equal(0); + done(); + }, 10); + }); it('disabled when children is radio button', done => { vm = createVue({ template: ` @@ -174,6 +286,61 @@ describe('Radio', () => { done(); }); }); + it('change event', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + methods: { + onChange(val) { + this.data = val; + } + }, + data() { + return { + data: 0, + radio: 3 + }; + } + }, true); + let radio = vm.$refs.radio2; + radio.$el.click(); + setTimeout(_ => { + expect(vm.data).to.equal(6); + done(); + }, 10); + }); + it('change event only triggers on user input', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + methods: { + onChange(val) { + this.data = val; + } + }, + data() { + return { + data: 0, + radio: 3 + }; + } + }, true); + vm.radio = 6; + setTimeout(_ => { + expect(vm.data).to.equal(0); + done(); + }, 10); + }); it('size', done => { vm = createVue({ template: `