zoukankan      html  css  js  c++  java
  • Vue Elementui 如何让输入框每次自动聚焦

    在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦。如下图。一般情况下提示框是隐藏的。点击了编辑才会弹出。

    那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有第一次有用。

    然后尝试了ref,再this.$refs.el 也不能成功拿到该元素,因为饿了么组件封装的<el-input>对应的是外面一个div,里面包了个input,在获取元素的时候有问题的。

    第二种尝试,利用class 或者id 获取元素,然后再手动聚焦 el.focus(),好像也不起作用。

    然后查看文档决定用,diretives 自定义指令,然而还是怎么弄都没用。

    最后又是网上各种查,才明白,inserted 只在元素插入的时候才有用,然而饿了么组件中提示框的隐藏显示是v-show原来。

    没办法最后只能把<el-input> 替换掉,换成原生标签 input ,样式上直接class复制一下之前的样式吧。 v-if 与提示框的 v-show的值绑定在一起,这样就轻松实现啦!

    总结反思,对vue的自定义指令原理不熟悉 ,对饿了么组件的封装原理也不是十分明白。

    总觉得还有更简单的方法,希望大佬们多指教!!!

  • 相关阅读:
    蓝桥杯--芯片测试
    蓝桥杯--FJ的字符串
    win8 js 没反应
    winform win8 js checkbox互动
    win8 GridView
    wcf服务引用无实体类对象
    arcgis 接口转换与.Net框架
    win8 链接
    分页控件
    Oracle 分页查询存储过程
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/7831972.html
Copyright © 2011-2022 走看看