fix: checkbox add focus blur events & autoFocus

pull/22/head
tjz 2018-05-20 21:41:40 +08:00
parent 0a0f2e240b
commit 14e7805af1
1 changed files with 21 additions and 1 deletions

View File

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