fix: update disabled radiogroup's classname

pull/77/merge
tjz 2018-06-17 17:46:09 +08:00
parent 9f307fd25d
commit 9df74bedd7
2 changed files with 22 additions and 29 deletions

View File

@ -41,24 +41,6 @@ export default {
} }
}) })
}, },
computed: {
classes () {
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: stateChecked,
[`${prefixCls}-wrapper-disabled`]: disabled,
}
},
checkboxClass () {
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}`]: true,
[`${prefixCls}-checked`]: stateChecked,
[`${prefixCls}-disabled`]: disabled,
}
},
},
methods: { methods: {
handleChange (event) { handleChange (event) {
const targetChecked = event.target.checked const targetChecked = event.target.checked
@ -114,7 +96,7 @@ export default {
}, },
}, },
render () { render () {
const { id, classes, checkboxClass, prefixCls, const { id, prefixCls,
stateChecked, handleChange, $slots, stateChecked, handleChange, $slots,
onFocus, onFocus,
onBlur, onBlur,
@ -127,9 +109,20 @@ export default {
name = radioGroupContext.name name = radioGroupContext.name
disabled = disabled || radioGroupContext.disabled disabled = disabled || radioGroupContext.disabled
} }
const wrapperClassString = {
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: stateChecked,
[`${prefixCls}-wrapper-disabled`]: disabled,
}
const checkboxClass = {
[`${prefixCls}`]: true,
[`${prefixCls}-checked`]: stateChecked,
[`${prefixCls}-disabled`]: disabled,
}
return ( return (
<label <label
class={classes} class={wrapperClassString}
onMouseenter={onMouseEnter} onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave} onMouseleave={onMouseLeave}
> >

View File

@ -33,10 +33,10 @@ exports[`renders ./components/radio/demo/radioButton.md correctly 1`] = `
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-default"> <div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label> <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
<label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label> <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
<label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label> <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
<label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label> <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
</div> </div>
</div> </div>
</div> </div>
@ -79,17 +79,17 @@ exports[`renders ./components/radio/demo/radioGroup-options.md correctly 1`] = `
<div class="ant-radio-group ant-radio-group-default"> <div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label> <label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label>
<label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label> <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label> <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
</div> </div>
</div> </div>
`; `;
exports[`renders ./components/radio/demo/radioGroup-with-name.md correctly 1`] = ` exports[`renders ./components/radio/demo/radioGroup-with-name.md correctly 1`] = `
<div class="ant-radio-group ant-radio-group-default"> <div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label> <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label> <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label> <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label> <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label>
</div> </div>
`; `;