2018-03-20 11:06:04 +00:00
|
|
|
import PropTypes from '../_util/vue-types'
|
2018-01-12 08:10:41 +00:00
|
|
|
import hasProp from '../_util/props-util'
|
2017-10-27 06:04:48 +00:00
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ARadio',
|
2017-10-27 06:04:48 +00:00
|
|
|
props: {
|
|
|
|
prefixCls: {
|
|
|
|
default: 'ant-radio',
|
|
|
|
type: String,
|
|
|
|
},
|
2017-11-02 04:07:20 +00:00
|
|
|
defaultChecked: Boolean,
|
|
|
|
checked: { type: Boolean, default: undefined },
|
2017-10-27 06:04:48 +00:00
|
|
|
disabled: Boolean,
|
|
|
|
isGroup: Boolean,
|
2018-03-20 11:06:04 +00:00
|
|
|
value: PropTypes.any,
|
2017-10-27 06:04:48 +00:00
|
|
|
name: String,
|
2018-06-01 13:25:16 +00:00
|
|
|
id: String,
|
2018-06-17 08:14:49 +00:00
|
|
|
autoFocus: Boolean,
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
|
|
|
model: {
|
|
|
|
prop: 'checked',
|
|
|
|
},
|
2017-11-07 03:58:47 +00:00
|
|
|
inject: {
|
|
|
|
radioGroupContext: { default: undefined },
|
|
|
|
},
|
2017-11-02 04:07:20 +00:00
|
|
|
data () {
|
2017-11-07 03:58:47 +00:00
|
|
|
const { radioGroupContext, checked, defaultChecked, value } = this
|
|
|
|
let stateChecked
|
2018-03-20 11:06:04 +00:00
|
|
|
if (radioGroupContext && radioGroupContext.stateValue !== undefined) {
|
2017-11-07 03:58:47 +00:00
|
|
|
stateChecked = radioGroupContext.stateValue === value
|
|
|
|
}
|
2017-11-02 04:07:20 +00:00
|
|
|
return {
|
2017-11-07 03:58:47 +00:00
|
|
|
stateChecked: stateChecked === undefined
|
2017-12-27 10:15:11 +00:00
|
|
|
? !hasProp(this, 'checked') ? defaultChecked : checked
|
2017-11-07 03:58:47 +00:00
|
|
|
: stateChecked,
|
2017-11-02 04:07:20 +00:00
|
|
|
}
|
|
|
|
},
|
2018-06-17 08:14:49 +00:00
|
|
|
mounted () {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.autoFocus) {
|
|
|
|
this.$refs.input.focus()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
methods: {
|
|
|
|
handleChange (event) {
|
2017-11-02 04:07:20 +00:00
|
|
|
const targetChecked = event.target.checked
|
2017-11-07 03:58:47 +00:00
|
|
|
this.$emit('input', targetChecked)
|
2018-05-05 09:46:04 +00:00
|
|
|
const { name, value, radioGroupContext } = this
|
2017-12-27 10:15:11 +00:00
|
|
|
if ((!hasProp(this, 'checked') && !radioGroupContext) || (radioGroupContext && radioGroupContext.value === undefined)) {
|
2017-11-02 04:07:20 +00:00
|
|
|
this.stateChecked = targetChecked
|
|
|
|
}
|
2017-10-27 06:04:48 +00:00
|
|
|
const target = {
|
|
|
|
name,
|
|
|
|
value,
|
2018-05-05 09:46:04 +00:00
|
|
|
checked: targetChecked,
|
2017-10-27 06:04:48 +00:00
|
|
|
}
|
2017-11-07 03:58:47 +00:00
|
|
|
if (this.radioGroupContext) {
|
|
|
|
this.radioGroupContext.handleChange({ target })
|
|
|
|
} else {
|
|
|
|
this.$emit('change', {
|
|
|
|
target,
|
|
|
|
stopPropagation () {
|
|
|
|
event.stopPropagation()
|
|
|
|
},
|
|
|
|
preventDefault () {
|
|
|
|
event.preventDefault()
|
|
|
|
},
|
|
|
|
})
|
2017-10-27 06:04:48 +00:00
|
|
|
}
|
|
|
|
},
|
2018-06-17 08:14:49 +00:00
|
|
|
focus () {
|
|
|
|
this.$refs.input.focus()
|
|
|
|
},
|
|
|
|
blur () {
|
|
|
|
this.$refs.input.blur()
|
|
|
|
},
|
|
|
|
onFocus (e) {
|
|
|
|
this.$emit('focus', e)
|
|
|
|
},
|
|
|
|
onBlur (e) {
|
|
|
|
this.$emit('blur', e)
|
|
|
|
},
|
|
|
|
onMouseEnter (e) {
|
|
|
|
this.$emit('mouseenter', e)
|
|
|
|
},
|
|
|
|
onMouseLeave (e) {
|
|
|
|
this.$emit('mouseleave', e)
|
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2017-11-02 04:07:20 +00:00
|
|
|
watch: {
|
|
|
|
checked (val) {
|
|
|
|
this.stateChecked = val
|
|
|
|
},
|
2017-11-07 03:58:47 +00:00
|
|
|
'radioGroupContext.stateValue': function (stateValue) {
|
|
|
|
this.stateChecked = stateValue === this.value
|
|
|
|
},
|
2017-11-02 04:07:20 +00:00
|
|
|
},
|
2018-03-19 01:43:31 +00:00
|
|
|
render () {
|
2018-06-17 09:46:09 +00:00
|
|
|
const { id, prefixCls,
|
2018-06-17 09:22:26 +00:00
|
|
|
stateChecked, handleChange, $slots,
|
2018-06-17 08:14:49 +00:00
|
|
|
onFocus,
|
|
|
|
onBlur,
|
|
|
|
onMouseEnter,
|
|
|
|
onMouseLeave,
|
2018-06-17 09:22:26 +00:00
|
|
|
radioGroupContext,
|
2018-06-17 08:14:49 +00:00
|
|
|
} = this
|
2018-06-17 09:22:26 +00:00
|
|
|
let { name, disabled } = this
|
|
|
|
if (radioGroupContext) {
|
|
|
|
name = radioGroupContext.name
|
|
|
|
disabled = disabled || radioGroupContext.disabled
|
|
|
|
}
|
2018-06-17 09:46:09 +00:00
|
|
|
const wrapperClassString = {
|
|
|
|
[`${prefixCls}-wrapper`]: true,
|
|
|
|
[`${prefixCls}-wrapper-checked`]: stateChecked,
|
|
|
|
[`${prefixCls}-wrapper-disabled`]: disabled,
|
|
|
|
}
|
|
|
|
const checkboxClass = {
|
|
|
|
[`${prefixCls}`]: true,
|
|
|
|
[`${prefixCls}-checked`]: stateChecked,
|
|
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
|
|
}
|
|
|
|
|
2018-03-19 01:43:31 +00:00
|
|
|
return (
|
2018-06-17 08:14:49 +00:00
|
|
|
<label
|
2018-06-17 09:46:09 +00:00
|
|
|
class={wrapperClassString}
|
2018-06-17 08:14:49 +00:00
|
|
|
onMouseenter={onMouseEnter}
|
|
|
|
onMouseleave={onMouseLeave}
|
|
|
|
>
|
2018-03-19 01:43:31 +00:00
|
|
|
<span class={checkboxClass}>
|
|
|
|
<input name={name} type='radio' disabled={disabled}
|
|
|
|
class={`${prefixCls}-input`} checked={stateChecked}
|
2018-06-17 08:14:49 +00:00
|
|
|
onChange={handleChange} id={id} ref='input'
|
|
|
|
onFocus={onFocus}
|
|
|
|
onBlur={onBlur}
|
2018-03-19 01:43:31 +00:00
|
|
|
/>
|
|
|
|
<span class={`${prefixCls}-inner`} />
|
|
|
|
</span>
|
|
|
|
{$slots.default ? <span>
|
|
|
|
{$slots.default}
|
|
|
|
</span> : null}
|
|
|
|
</label>
|
|
|
|
)
|
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
}
|
2018-03-19 02:16:27 +00:00
|
|
|
|