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()
}
}
}
})
