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

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

Browse Source 
* support radio group disabled

* fix disabled radio button style bug
This commit is contained in:
baiyaaaaa 2017-01-16 10:43:10 +08:00 committed by cinwell.li
parent 3dc98d703b
commit 33954866fb
8 changed files with 209 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'
};
}
}

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

@ -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: '上海'
};
}
}

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

@ -1,3 +1,25 @@
<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>

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

@ -1,3 +1,8 @@
<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>

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

@ -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;
}
}
};

3
packages/theme-default/src/common/var.css
View File

@ -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
-------------------------- */

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

@ -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);

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

@ -50,40 +50,14 @@ describe('Radio', () => {
done();
});
});
it('radio group', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio">
<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);
setTimeout(_ => {
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
let radioElm = vm.$refs.radio2.$el;
radioElm.click();
vm.$nextTick(_ => {
expect(radioElm.querySelector('.is-checked')).to.be.ok;
expect(vm.radio === 6).to.be.true;
done();
});
}, 50);
});
describe('Radio', () => {
describe('Radio group', () => {
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 :label="3" ref="radio1">备选项</el-radio>
<el-radio :label="6" ref="radio2">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
`,
data() {
@ -92,19 +66,46 @@ describe('Radio', () => {
};
}
}, true);
expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
let radio = vm.$refs.radio2;
radio.$el.click();
setTimeout(_ => {
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
let radioElm = vm.$refs.radio2.$el;
radioElm.click();
vm.$nextTick(_ => {
expect(radioElm.querySelector('.is-checked')).to.be.ok;
expect(vm.radio === 6).to.be.true;
done();
});
}, 50);
});
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(radio.$el.classList.contains('is-active')).to.be.true;
expect(vm.radio === 6).to.be.true;
expect(vm.radio === 3).to.be.true;
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
done();
});
});
it('custom color', done => {
it('disabled when children is radio button', done => {
vm = createVue({
template: `
<el-radio-group v-model="radio" fill="#000" text-color="#ff0">
<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>
@ -116,12 +117,83 @@ describe('Radio', () => {
};
}
}, 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.$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');
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: `
<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();
});
});
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();
});
});
});
});
});