zoukankan      html  css  js  c++  java
  • Vue 回顾之指令(关于input自动聚焦的问题)

    用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用。

    今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦。

    一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料,

    最终问题指向了vue的指令,因此先回过头看看vue的指令部分。

    vue指令

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:

    当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
    })

    如果想注册局部指令,组件中也接受一个 directives 的选项:

    directives: {
    focus: {
    // 指令的定义
    inserted: function (el) {
    el.focus()
    }
    }
    }

    然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

    <input v-focus>

    好了,问题看似得到了解决。但在具体的项目中,我们在inserted中拿到的el可能不是input节点(比如直接使用了第三方组件库),这时就需要遍历el的childNode属性,获得我们

    想要的input元素引用,从而调用focus方法。

    至此,问题圆满解决。

  • 相关阅读:
    Oracle->oracle单实例Shell脚本[20180122]
    oracle 11g grid软件安装[20180121]
    MySQL-5.7.20主从复制测试[20180110]
    Sonarqube中文插件-Linux[20180105]
    Sonar安装-Linux[20171227]
    (Linux 日常命令)[20171225]
    ThreadLocal的实现机制
    LruCache源码分析
    命令提示符怎么以管理员方式打开
    Eslint 从入门到放弃 http://blog.csdn.net/fay462298322/article/details/74931092
  • 原文地址:https://www.cnblogs.com/cangqinglang/p/10216077.html
Copyright © 2011-2022 走看看