test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

support radio button custom style

Browse Source
This commit is contained in:
baiyaaaaa 2016-11-26 17:54:27 +08:00 committed by 杨奕
parent 64f1caea38
commit 75d248e107
6 changed files with 67 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/en-US/radio.md
View File

@ -137,5 +137,7 @@ change | triggers when the bound value changes | the label value of the chosen r
---- | ---- | ---- | ---- | ----
label | the value of radio | string/number | — | —
disabled | whether radio is disabled | boolean | — | false
fill | border and background color when button is active | string | — | #20a0ff |
text-color | font color when button is active | string | — | #ffffff |

2
examples/docs/zh-CN/radio.md
View File

@ -138,3 +138,5 @@
|---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |

9
packages/radio/src/radio-button.vue
View File

@ -23,6 +23,13 @@
set(newValue) {
this.$parent.$emit('input', newValue);
}
},
activeStyle() {
return {
backgroundColor: this.$parent.fill,
borderColor: this.$parent.fill,
color: this.$parent.textColor
};
}
}
};
@ -43,7 +50,7 @@
v-model="value"
:name="name"
:disabled="disabled">
<span class="el-radio-button__inner">
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>

10
packages/radio/src/radio-group.vue
View File

@ -10,7 +10,15 @@
props: {
value: [String, Number],
size: String
size: String,
fill: {
type: String,
default: '#20a0ff'
},
textColor: {
type: String,
default: '#fff'
}
},
watch: {
value(value) {

9
packages/theme-default/src/radio.css
View File

@ -160,15 +160,6 @@
z-index: -1;
left: -999px;
&:checked {
& + .el-radio-button__inner {
z-index: 1;
background-color: var(--color-primary);
border-color: @background-color;
color: #fff;
}
}
&:disabled {
& + .el-radio-button__inner {
color: var(--button-disabled-color);

68
test/unit/specs/radio.spec.js
View File

@ -76,28 +76,52 @@ describe('Radio', () => {
});
}, 50);
});
it('radio button', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio">
<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);
expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
let radio = vm.$refs.radio2;
radio.$el.click();
vm.$nextTick(_ => {
expect(radio.$el.classList.contains('is-active')).to.be.true;
expect(vm.radio === 6).to.be.true;
done();
describe('Radio', () => {
it('create', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio">
<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);
expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
let radio = vm.$refs.radio2;
radio.$el.click();
vm.$nextTick(_ => {
expect(radio.$el.classList.contains('is-active')).to.be.true;
expect(vm.radio === 6).to.be.true;
done();
});
});
it('custom color', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio" fill="#000" text-color="#ff0">
<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.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
done();
});
});
});
});