解决Vue input输入框卡死的问题

原因

我把 vuex 全局变量 $store.state.search.key 绑定到 v-model 上，然后在页面挂载时通过代码修改 $store.state.search.key 的值，最后在页面上输入任意值 input 框就卡住了

解决方法

1.input 标签增加 @input 属性

<input v-model='$store.state.search.key' @input="forceUpdateInput">

2.methods 中增加对应方法

forceUpdateInput(){this.$forceUpdate();}

补充：下面看下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 input输入框卡死的解决办法的文章就介绍到这了,更多相关Vue input输入框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • vue 项目页面卡死原因排查分析

    vue 项目页面卡死原因排查分析

    目录 问题描述 问题排查 小结 问题描述 点击后台管理某一菜单发现直接卡死,没有其他报错信息,整个网页鼠标变为手指状态不能进行任何操作 问题排查 首先是通过注释代码发现问题是出在以下代码中 <basic-container> <h4>教师指标数据</h4> <avue-crud ref="crud" :data="tableData" :table-loading="tableLoading" :opti

  • 解决Vue input输入框卡死的问题

    解决Vue input输入框卡死的问题

    原因 我把 vuex 全局变量 $store.state.search.key 绑定到 v-model 上,然后在页面挂载时通过代码修改 $store.state.search.key 的值,最后在页面上输入任意值 input 框就卡住了 解决方法 1.input 标签增加 @input 属性 <input v-model='$store.state.search.key' @input="forceUpdateInput"> 2.methods 中增加对应方法 force

  • vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list

  • vue input输入框模糊查询的示例代码

    vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • Vue通过字符串关键字符实现动态渲染input输入框

    目录 问题描述 { xxx } 标识字符渲染Dom 组件设计 组件开发 重点 输入完成事件 动态编辑文本 今天做一个简单的demo,就是有一个字符串,字符串里面有标识符,前端检测到标识符之后,需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能. 问题描述 就比如现在有这样一个字符串: 你好,我是{name},我今年{age} 岁,我喜欢的运动是{play}. 前端需要把 {xxx} 及其包裹的内容转变成一个输入框渲染出来,并且呢,当在输入框输入数据的时候,需要对输入的内容进

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • 解决ios h5 input输入框被输入法弹出一块区域的问题

    问题:如下图 解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法 输入框中 onclick="sr(this);" onblur="nosr(this)" */ var timer1; function sr(obj) { timer1 =

  • 解决ios手机中input输入框光标过长的问题

    在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-size: 14px; color: #333; border: none; outline: none; line-height: 50px; } 修改后css部分代码

  • vue element-ui实现input输入框金额数字添加千分位

    在util.js中定义方法 包含金额添加过滤千分位,验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,");

随机推荐