fix: checkbox add focus blur events & autoFocus

pull/165/head
tjz 2018-05-20 21:41:40 +08:00
parent f62e2cc103
commit c8167d6b36
1 changed files with 21 additions and 1 deletions

View File

@ -17,6 +17,7 @@ export default {
name: String, name: String,
indeterminate: Boolean, indeterminate: Boolean,
type: PropTypes.string.def('checkbox'), type: PropTypes.string.def('checkbox'),
autoFocus: Boolean,
}, },
model: { model: {
prop: 'checked', prop: 'checked',
@ -24,6 +25,13 @@ export default {
inject: { inject: {
checkboxGroupContext: { default: null }, checkboxGroupContext: { default: null },
}, },
mounted () {
this.$nextTick(() => {
if (this.autoFocus) {
this.$refs.input.focus()
}
})
},
data () { data () {
const { checkboxGroupContext, checked, defaultChecked, value } = this const { checkboxGroupContext, checked, defaultChecked, value } = this
let sChecked let sChecked
@ -85,6 +93,12 @@ export default {
blur () { blur () {
this.$refs.input.blur() this.$refs.input.blur()
}, },
onFocus (e) {
this.$emit('focus', e)
},
onBlur (e) {
this.$emit('blur', e)
},
}, },
watch: { watch: {
checked (val) { checked (val) {
@ -95,7 +109,11 @@ export default {
}, },
}, },
render () { render () {
const { $props: props, checkboxGroupContext, checkboxClass, name, $slots, sChecked } = this const { $props: props, checkboxGroupContext,
checkboxClass, name, $slots, sChecked,
onFocus,
onBlur,
} = this
const { const {
prefixCls, prefixCls,
} = props } = props
@ -119,6 +137,8 @@ export default {
<input name={name} type='checkbox' disabled={disabled} <input name={name} type='checkbox' disabled={disabled}
class={`${prefixCls}-input`} checked={sChecked} class={`${prefixCls}-input`} checked={sChecked}
onChange={onChange} ref='input' onChange={onChange} ref='input'
onFocus={onFocus}
onBlur={onBlur}
/> />
<span class={`${prefixCls}-inner`} /> <span class={`${prefixCls}-inner`} />
</span> </span>