美文网首页
在element-UI中使用自定义指令v-focus的问题

在element-UI中使用自定义指令v-focus的问题

作者: Gambler_194b | 来源:发表于2020-09-02 10:53 被阅读0次

    首先,在全局中定义一个自定义指令

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

    奇怪的是在组件中使用的时候没有生效,但是在自己写的input框中可以生效,打印检查之后发现是element-UI的输入框中嵌套在div中


    image.png

    所以将自定义指令稍作修改即可

    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        console.log(el.children[0]);
        el.children[0].focus()
      }
    })
    

    相关文章

      网友评论

          本文标题:在element-UI中使用自定义指令v-focus的问题

          本文链接:https://www.haomeiwen.com/subject/bdbisktx.html