Vue编写自定义指令

最新推荐文章于 2022-05-28 01:34:59 发布

codser

最新推荐文章于 2022-05-28 01:34:59 发布

阅读量403

点赞数

分类专栏： Vue.js 文章标签： vue编写自定义指令 vue用指令解决elementUI中input输入框自动聚焦

本文链接：https://blog.csdn.net/codser/article/details/98885148

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在src目录下创建directives目录下创建index.js,其内容如下：

import Vue from 'vue'
Vue.directive('focus'/*注册一个全局自定义指令 v-focus */, {
          // 当绑定元素插入到 DOM 中。
          inserted: function (el) {
                    // 备用方法:Array.prototype.slice.call(el.classList).includes('el-input')&&el.firstElementChild!=null
                    if(el.querySelector('.el-input__inner')!=null){
                              // 若为elementUI中el-input组件
                              el.querySelector('.el-input__inner').focus();
                    }else{
                             //若为原生input只需[el.focus()即可获得焦点]
                              el.focus();
                    }
          }
})

最后在main.js中引入即可：

// 引入自定义指令

import './directives'