Vue-element中el-input输入卡顿问题的解决
更新时间：2023年04月23日 09:41:47 作者：YouluBank
这篇文章主要介绍了Vue-element中el-input输入卡顿问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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()
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
lottie实现vue自定义loading指令及常用指令封装详解
这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了详解Vite的新体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了vue beforeEach 死循环问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了区分vue-router的hash和history模式，帮助大家更好的理解和学习vue路由，感兴趣的朋友可以了解下2020-10-10
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、v-for、v-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼2022-11-11
这篇文章主要介绍了Element实现表格分页数据选择+全选所有完善批量操作，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
登录功能对于前端刚入门不久的同学来说较为困难,下面这篇文章主要给大家介绍了关于Vue登录功能实现(含封装axios)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论