Skip to content

E
Element
Commit 33954866 authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li
Browse files
Options

feature: Radio Group disabled && radio button style bug fix (#2411) 

* support radio group disabled

* fix disabled radio button style bug
parent 3dc98d70
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 86 deletions
examples/docs/en-US/radio.md
View file @ 33954866
......@@ -5,7 +5,9 @@
radio: '1',
radio1: 'selected and disabled',
radio2: 3,
radio3: ''
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
};
}
};
......@@ -95,7 +97,21 @@ Radio with button styles.
<el-radio-group v-model="radio3">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" :disabled="true"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
......@@ -103,7 +119,9 @@ Radio with button styles.
export default {
data () {
return {
radio3: ''
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
};
}
}
......
examples/docs/zh-CN/radio.md
View file @ 33954866
......@@ -5,7 +5,9 @@
radio: '1',
radio1: '选中且禁用',
radio2: 3,
radio3: ''
radio3: '上海',
radio4: '上海',
radio5: '上海'
};
}
};
......@@ -99,7 +101,21 @@
<el-radio-group v-model="radio3">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京" :disabled="true"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</template>
......@@ -108,7 +124,9 @@
export default {
data () {
return {
radio3: ''
radio3: '上海',
radio4: '上海',
radio5: '上海'
};
}
}
......
packages/radio/src/radio-button.vue
View file @ 33954866
<template>
<label
class="el-radio-button"
:class="[
size ? 'el-radio-button--' + size : '',
{ 'is-active': value === label },
{ 'is-disabled': isDisabled }
]"
>
<input
class="el-radio-button__orig-radio"
:value="label"
type="radio"
v-model="value"
:name="name"
:disabled="isDisabled">
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
</label>
</template>
<script>
export default {
name: 'ElRadioButton',
......@@ -29,36 +51,17 @@
},
activeStyle() {
return {
backgroundColor: this._radioGroup.fill,
borderColor: this._radioGroup.fill,
color: this._radioGroup.textColor
backgroundColor: this._radioGroup.fill || '',
borderColor: this._radioGroup.fill || '',
color: this._radioGroup.textColor || ''
};
},
size() {
return this._radioGroup.size;
},
isDisabled() {
return this.disabled || this._radioGroup.disabled;
}
}
};
</script>
<template>
<label
class="el-radio-button"
:class="[
size ? 'el-radio-button--' + size : '',
{ 'is-active': value === label }
]"
>
<input
class="el-radio-button__orig-radio"
:value="label"
type="radio"
v-model="value"
:name="name"
:disabled="disabled">
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
</label>
</template>
packages/radio/src/radio-group.vue
View file @ 33954866
<template>
<div class="el-radio-group">
<slot></slot>
</div>
</template>
<script>
import Emitter from 'element-ui/src/mixins/emitter';
......@@ -11,14 +16,9 @@
props: {
value: [String, Number],
size: String,
fill: {
type: String,
default: '#20a0ff'
},
textColor: {
type: String,
default: '#fff'
}
fill: String,
textColor: String,
disabled: Boolean
},
watch: {
value(value) {
......@@ -29,8 +29,3 @@
};
</script>
<template>
<div class="el-radio-group">
<slot></slot>
</div>
</template>
packages/radio/src/radio.vue
View file @ 33954866
......@@ -2,7 +2,7 @@
<label class="el-radio">
<span class="el-radio__input"
:class="{
'is-disabled': disabled,
'is-disabled': isDisabled,
'is-checked': model === label,
'is-focus': focus
}"
......@@ -16,7 +16,7 @@
@focus="focus = true"
@blur="focus = false"
:name="name"
:disabled="disabled">
:disabled="isDisabled">
</span>
<span class="el-radio__label">
<slot></slot>
......@@ -73,6 +73,12 @@
this.$emit('input', val);
}
}
},
isDisabled() {
return this.isGroup
? this._radioGroup.disabled || this.disabled
: this.disabled;
}
}
};
......
packages/theme-default/src/common/var.css
View file @ 33954866
......@@ -139,6 +139,9 @@
--radio-input-border-color-hover: var(--color-primary);
--radio-button-font-size: var(--font-size-base);
--radio-button-checked-fill: var(--color-primary);
--radio-button-checked-color: var(--color-white);
--radio-button-checked-border-color: var(--color-primary);
/* Select
-------------------------- */
......
packages/theme-default/src/radio.css
View file @ 33954866
......@@ -171,6 +171,14 @@
z-index: -1;
left: -999px;
&:checked {
& + .el-radio-button__inner {
color: var(--radio-button-checked-color);
background-color: var(--radio-button-checked-fill);
border-color: var(--radio-button-checked-border-color);
}
}
&:disabled {
& + .el-radio-button__inner {
color: var(--button-disabled-color);
......
test/unit/specs/radio.spec.js
View file @ 33954866
......@@ -50,7 +50,8 @@ describe('Radio', () => {
done();
});
});
it('radio group', done => {
describe('Radio group', () => {
it('create', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio">
......@@ -76,7 +77,57 @@ describe('Radio', () => {
});
}, 50);
});
describe('Radio', () => {
it('disabled', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio" disabled>
<el-radio :label="3" ref="radio1">备选项</el-radio>
<el-radio :label="6" ref="radio2">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
`,
data() {
return {
radio: 3
};
}
}, true);
let radio2 = vm.$refs.radio2;
expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
radio2.$el.click();
vm.$nextTick(_ => {
expect(vm.radio === 3).to.be.true;
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
done();
});
});
it('disabled when children is radio button', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio" disabled>
<el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
<el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
<el-radio-button :label="9">备选项</el-radio-button>
</el-radio-group>
`,
data() {
return {
radio: 3
};
}
}, true);
let radio2 = vm.$refs.radio2;
expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
radio2.$el.click();
vm.$nextTick(_ => {
expect(vm.radio === 3).to.be.true;
expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
done();
});
});
describe('Radio Button', () => {
it('create', done => {
vm = createVue({
template: `
......@@ -123,5 +174,26 @@ describe('Radio', () => {
done();
});
});
it('size', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio" size="large">
<el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
<el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
<el-radio-button :label="9">备选项</el-radio-button>
</el-radio-group>
`,
data() {
return {
radio: 3
};
}
}, true);
vm.$nextTick(_ => {
expect(vm.$el.querySelectorAll('.el-radio-button--large').length).to.be.equal(3);
done();
});
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment