Vue2 & ElementUI实现管理后台之input获得焦点


在Vue中要给input设置焦点,需要注册自定义指令。


    Vue.directive('focus', function (el, option) {
        var defClass = 'el-input', defTag = 'input';
        var value = option.value || true;
        if (typeof value === 'boolean')
            value = { cls: defClass, tag: defTag, foc: value };
        else
            value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
        if (el.classList.contains(value.cls) && value.foc)
            el.getElementsByTagName(value.tag)[0].focus();
    });

由于ElementUI中的el-input是一个自定义组件,并非input元素,所以需要传入组件的class和tag名称来定位组件内的原生input,并调用input的focus方法来获得焦点。

使用的时候,分两种情况:

页面中只有一个组件用到focus指令


<el-input v-focus="true"></el-input>

页面中有多个组件用到focus指令

此时,需要传入class和tag来定位具体的元素


<el-input-number v-focus="{ cls: 'el-input-number',tag: 'input', foc: focus.count }"  v-on:blur="focus.count=false"></el-input-number>

补充说明:

在实际用focus指令的过程中,需要给元素添加blur事件: v-on:blur="focus.count=false"。失去焦点后一定要把focus指令对应的变量置为false,否则会导致一些不可控的bug。

参考资料:

[1] : https://cn.vuejs.org/v2/guide/custom-directive.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,740评论 18 399
  • 古人不见今时月,今月曾经照古人。 先到为君,后到为臣。 莫道君行早,更有早行人。 莫信直中直,须防仁不仁。 山中有...
    祝福六月阅读 532评论 0 1
  • 一直感觉自己很幸运,以前领导说我是傻人有傻福,想想不假,简简单单的思考,简简单单的相信,简简单单生活,很好...
    冷暖知阅读 242评论 0 0