【Vue基础】自动获取焦点功能

最新推荐文章于 2024-09-26 17:07:55 发布

为道日损_yjj

最新推荐文章于 2024-09-26 17:07:55 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/yjj510818155/article/details/105202288

本文介绍了在Vue中实现自动获取焦点的两种方法：一是利用特殊字符ref操作DOM，二是通过自定义指令。详细讲解了如何使用ref在mounted钩子中获取DOM并实现聚焦，以及如何全局和局部注册自定义指令，并在插入DOM时触发聚焦功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：用特殊字符ref操作DOM

解决的问题: 在vue中操作DOM元素
步骤:
1. 给DOM元素设置ref属性的值
2. 在Vue中的mounted选项下通过this.$refs.属性获取到要操作的DOM
通过在控制台输出 this.$refs.ref属性值可以查看到要操作的dom元素的标签
通过如下代码可实现页面自动聚焦功能：

        <div id='app'>
            <input type="text" ref='txt'>
        </div>
        <script>

            new Vue({
                el: "#app",
                data:{
                    
                },
            mounted() {
                // console.log(this.$refs.txt)
                this.$refs.txt.focus();
            }

            
            })

方法二：自定义指令

使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
分类:全局注册和局部注册

1. 局部注册

在vm对象的选项中设置自定义指令 directives:{}
directives:{
指令的核心名称 :{
inserted: function(使用指令时的DOM对象) {
具体的DOM操作 } }}
在视图中通过标签去使用指令

//视图部分
<input v-focus type="text">
//实例部分
           new Vue({
                el: "#app",
            	directives: {
          	  focus: {
                inserted: function(el) {
                    el.focus();
                }
            }

2.全局注册

在创建 Vue 实例之前定义全局自定义指令Vue.directive()
Vue.directive(‘指令的名称’,{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
在视图中通过"v-自定义指令名"去使用指令

 Vue.directive('focus',{insert:(el)=>{
                el.focus();}
            });

注意：

Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-
inserted: 当被绑定的元素插入到 DOM 中时,会被调用

补充：
1. 可将之前的静态页面哪里中的添加商品输入框实现自动聚焦效果~