元素聚焦

其实聚焦本质上还是调用js的原生方法focus()，也就是说如果你想要某个DOM节点聚焦，只需要它调用这个方法就可以

需求

当弹窗打开时，自动聚焦到input输入框。
看似很简单，但是有两个容易出问题的地方：
一、聚焦的时机
当弹窗的开关变量为true时，你让相应的元素聚焦，但此时可能弹窗并没有渲染完成
二、聚焦的元素
当你使用第三方组件的Input输入框时，你为这个输入框标记了ref，但是获取到的是这个组件，而并不是组件中的input
而你使用原生的input元素则不会有这个问题

代码

iView弹窗和输入框

<Modal v-model="modalFocus">
 <Input type="text" ref="inputFocus" :autofocus="true" v-model="inputValue" ></Input>
</Modal>

data () {
    return {        
        modalFocus: false,
        inputValue: '',
    }
},
watch: {
    modalFocus (val) {        
        if (val) {
            this.$nextTick(() => {                
                this.$refs.inputFocus.$el.children[1].focus()
            })
        }
    },
},

网站导航

网站导航