vue获取input焦点，弹框后自动获取input焦点
Document< ......</div>
<div class="content">
<div class="cnblogs_highlighter">
<pre class="brush: javascript;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<input type="text" id="one" value="11111">
<h2></h2>
<input type="text" id="two" value="22222">
<h2></h2>
<input type="text" id="three" value="33333" v-focus>
<h2></h2>
<input type="text" id="four" value="444444">
<h2></h2>
<el-row>
<el-button type="primary" @click="openone">点开弹框1</el-button>
</el-row>
<h2></h2>
<el-row>
<el-button type="primary" @click="opentwo">点开弹框2</el-button>
</el-row>
<!-- 第一个弹框 -->
<el-dialog title="1111111111111" :visible.sync="dialogvisibleone" width="80%">
<input v-model="one" ref="ref1" ></input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogvisibleone = false">取 消</el-button>
<el-button type="primary" @click="dialogvisibleone = false">确 定</el-button>
</span>
</el-dialog>
<!-- 第2个弹框 -->
<el-dialog title="2222222222" :visible.sync="dialogvisibletwo" width="80%">
<el-input v-model="two" ref="reftwo"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogvisibletwo = false">取 消</el-button>
<el-button type="primary" @click="dialogvisibletwo = false">确 定</el-button>
</span>
</el-dialog>
</div>
<script>
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()
}
}
}
})
</script>
</body>
</html>
</pre>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/332170.html">
为什么要用内插字符串代替string.format </a>
</p>
<p>
下一篇： <a href="/article/332172.html">
vue构建打包，使用webpack生成最终可以发布的版本 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2089678.html" target="_blank" title="jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例">
<h2>
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例 </h2>
</a>
</li>
<li>
<a href="/article/2081962.html" target="_blank" title="jquery实现input框获取焦点的方法">
<h2>
jquery实现input框获取焦点的方法 </h2>
</a>
</li>
<li>
<a href="/article/1992957.html" target="_blank" title="jquery实现input框获取焦点的简单实例">
<h2>
jquery实现input框获取焦点的简单实例 </h2>
</a>
</li>
<li>
<a href="/article/1933401.html" target="_blank" title="H5如何解决安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题？">
<h2>
H5如何解决安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题？ </h2>
</a>
</li>
<li>
<a href="/article/1834786.html" target="_blank" title="BootStrap模态框和select2合用时input无法获取焦点的解决方法">
<h2>
BootStrap模态框和select2合用时input无法获取焦点的解决方法 </h2>
</a>
</li>
<li>
<a href="/article/1660439.html" target="_blank" title="element input输入框自动获取焦点的实现">
<h2>
element input输入框自动获取焦点的实现 </h2>
</a>
</li>
<li>
<a href="/article/1638717.html" target="_blank" title="文本框(input)获取焦点(onfocus)时样式改变的实现方法">
<h2>
文本框(input)获取焦点(onfocus)时样式改变的实现方法 </h2>
</a>
</li>
<li>
<a href="/article/1606629.html" target="_blank" title="vue获取input焦点，弹框后自动获取input焦点">
<h2>
vue获取input焦点，弹框后自动获取input焦点 </h2>
</a>
</li>
<li>
<a href="/article/1538242.html" target="_blank" title="layui form表单 input输入框获取焦点后 阻止Enter回车自动提交">
<h2>
layui form表单 input输入框获取焦点后 阻止Enter回车自动提交 </h2>
</a>
</li>
<li>
<a href="/article/1462064.html" target="_blank" title="原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值">
<h2>
原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>