fix: checkbox add focus blur events & autoFocus
parent
f62e2cc103
commit
c8167d6b36
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue