Vue-element中el-input输入卡顿问题的解决

目录
  • Vue-element中el-input输入卡顿
    • 解决方法
  • vue遇到 el-input有时无法输入的bug
  • 总结

Vue-element中el-input输入卡顿

最近使用Vue-element时，遇到了el-input输入卡顿问题，影响用户体验，如下

el-input是这样写的，没有加额外的事件

<el-input v-model="code" placeholder="code" type="textarea" :rows="1"/>

解决方法

  • 使用.lazy修饰符
  • 使用.lazy的修饰符可以取消v-model的双向绑定，避免输入改变增加队列造成卡顿

注意：el-input底层代码会将文本框用div包裹，

所以直接在el-input中使用.lazy修饰符是不成功的，测试了这种写法确实无效

//不成功的使用方法
<el-input v-model.lazy="code" placeholder="code"></el-input>
//成功的使用方法("el-textarea__inner"类可以让样式与框架一致)
<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>

textarea class="el-textarea__inner"成功的替换了el-input，并且.lazy生效了，不卡顿了，nice

vue遇到 el-input有时无法输入的bug

1.在el-input中加入@input方法 代码如下

<el-input v-model="addRwForm.info" type="textarea" @input="inpChange($event)">

2.在methods中调用这个方法 并使用$forceUpdate(), 官方文档给出的解释是这个具有强制刷新的作用，迫使Vue重新渲染，它仅影响实例本身和插入插槽内容的子组件，并不是所有组件。

所以在输入的时候一直触发,从而解决无法输入的问题

inpChange (e) {
      this.$forceUpdate()
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

  • Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    目录 使用el-input自动获取焦点和二次获取焦点问题 使input和el-input自动获取焦点的处理 总结 使用el-input自动获取焦点和二次获取焦点问题 最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用. 查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到. 然后使用了Vue提供的自定义指

  • el-input无法输入的问题和表单验证失败问题解决

    目录 1.el-input无法输入的问题 原因1.el-input组件没有绑定双向响应式数据(v-model) 原因2.组件嵌套太深还是该组件是一个坑(具体原因不清楚,只知道解决方法) 解决方法的步骤 2.表单验证失败的问题 总结 1.el-input无法输入的问题 原因1.el-input组件没有绑定双向响应式数据(v-model) 解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了. 原因2.

  • vue el-input输入框输入不了的解决方法

    目录 一.问题 二.解决方法 三.总结 一.问题 1.今天写代码遇到了一个很奇葩的问题:写了很多个输入框,其他输入框都没有问题,就最后一个单独处理的有问题,输入框里面输入不了东西.着实不明白为什么,一遍又一遍抱怨,重复输入,里面还是除了原有的值什么都输不了. 除了原有的3,什么都输不了 二.解决方法 1.用vue dev-tools审查了才发现这个输入框无论输入什么,value值都是不变化,尽管 也触发了input事件(和html没有关系) html的逻辑也完全相同,定义的对象的value和v-

  • Unity中Instantiate实例化物体卡顿问题的解决

    Unity中Instantiate实例化物体卡顿问题的解决

    本文实例为大家分享了Unity中Instantiate实例化物体卡顿问题的解决方法,供大家参考,具体内容如下 一.前言 当在执行多次Instantiate实例化物体时,会卡顿严重甚至在移动端会导致程序崩溃 因为Instantiate会产生大量的GC,使CPU过高,导致崩溃 下面是一段测试代码:当我们按下按键时实例化100000个预制体 using UnityEngine; public class Test : MonoBehaviour { public GameObject prefab;

  • ubuntu端向日葵键盘输入卡顿问题及解决

    目录 1.问题现象 2.解决思路 3.操作过程 附录:ubuntu输入法框架 1.IBus 2.XIM 3.fcitx 总结 1.问题现象 最近,利用向日葵远程操控ubuntu电脑时,出现键盘输入延迟的情况. 具体表现为:鼠标操作正常.网页打开正常.网速正常,但是键盘输入会产生长时间延迟和丢数据的情况. 2.解决思路 网上多篇文章反应ibus输入法系统会产生卡顿. 将其切换成同一输入法系统(iBus)下的英文键盘(不是中文的shift切换英文输入),卡顿会消失. iBus的智能拼音输入法导致的输

  • Vue v-for中的 input 或 select的值发生改变时触发事件操作

    oninput 用法 <input type="text" id="myInput" oninput="myFunction()"> <script> function myFunction() { } </script> oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id="'m_num'+index" 注意m_num必须用单引号引起来

  • 解析react 函数组件输入卡顿问题 usecallback react.memo

    解析react 函数组件输入卡顿问题 usecallback react.memo

    目录 现象 分析 解决 方案一: 方案二: 弊端 现象 在输入问题时,输入框响应巨慢. 效果图 分析 右侧控制台显示,子组件不停在mount unmount,子组件中使用了CKEditor组件,每次mount开支较大,导致输入卡顿 代码如下: const qdata = (q.qdata || [ { id: getQuestionId('OPTION') }, { id: getQuestionId('OPTION') }, ]) as SelectOption[]; const render

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • vue element中axios下载文件（后端Python）

    •axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c

  • 一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃

    由于 Ubuntu 中的汉字输入实在是太不友好了,所以装了个 搜狗输入法,好不容易把 搜狗输入法装好,本以为可以开开心心的搞代码了,然而... pycharm 一打开,就崩溃,关不掉,进程杀死还是不行,只能关机重启. 本以为 pycharm 出现了问题,又重装了两遍,还是不行. 最终发现竟然是搜狗输入法以及 fcitx 输入法的锅 唉,只能老老实实的把 fctix 和搜狗输入法卸载了: (1)Ubuntu 软件里卸载 fctix,然后将键盘输入法系统改成 IBus (2)卸载搜狗输入法 先查找软

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • android特卖列表倒计时卡顿问题的解决方法

    android特卖列表倒计时卡顿问题的解决方法

    在Android的开发中,我们经常遇见倒计时的操作,通常使用Timer和Handler共同操作来完成.当然也可以使用Android系统控件CountDownTimer,这里我们封装成一个控件,也方便大家的使用. 首先上一张效果图吧: 说一下造成卡顿的原因,由于滑动的时候,adapter的getView频繁的创建和销毁,就会出现卡顿和数据错位问题,那么我们每一个item的倒计时就需要单独维护,这里我用的Handler与timer及TimerTask结合的方法,我们知道TimerTask运行在自己子

  • 详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chu

随机推荐