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