input取消焦点 vue_vue获取input焦点，弹框后自动获取input焦点

Document

点开弹框1

点开弹框2

取 消

确 定

取 消

确 定

var app = new Vue({

el: '#app',

data() {

return {

id: 'ssssss',

dialogVisibleOne: false, // 弹框显示隐藏

dialogVisibleTwo: false,

one: '',

two: ''

}

},

methods: {

/**

* 打开第一个弹框 自动获取焦点

*/

openOne() {

this.dialogVisibleOne = true // 1. 让弹框显示

this.$nextTick(() => { // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点

console.log(this.$refs.ref1)

this.$refs.ref1.focus() // 设置焦点

})

},

/**

* 打开第二个弹框 获取焦点

*/

openTwo() {

this.dialogVisibleTwo = true

this.$nextTick(() => {

this.$refs.refTwo.focus()

})

}

},

/**

* 自定义指令 让打开页面先获取焦点

*/

directives: {

focus: {

// 指令的定义

inserted: function (el) {

el.focus()

}

}

}

})