admin 管理员组

文章数量: 1087649

【记录】el

1.解决IE输入卡顿问题（IE打中文会卡）

检查了下拉框，没有特别多数据，请求下拉框的接口删掉之后还是很卡。

参考了文章：Element输入框iput输入卡顿问题_element ui input 响应特别慢_泷星丶的博客-CSDN博客

照文章说的用原生textarea之后确实不卡了，但是我还要指定最小行数和最大行数，这个如果用el-input的话直接用autosize属性就可以了，但是原生的没有。


<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>

2.文本域自适应高度，能设置最大行数和最小行数

我是通过自定义指令实现的。

创建一个js文件，写全局的自定义指令，然后在main.js里引用他。

文件路径@/utils/autoResize.js

import Vue from "vue";
// 原生textarea自适应高度指令 参数：minRows 最小行数 maxRows 最大行数 data 绑定的数据
const autoresize = Vue.directive("autoresize", {update: function(el, binding, vnode) {// 这个判断是为了以防多次触发，框疯狂的闪，找了很多地方都不知道哪里反复触发的，所以写了这个判断if (vnode.data.domProps.value != undefined &&vnode.data.domProps.value != null &&vnode.data.domProps.value != ""&&binding.oldValue.data!=binding.value.data) {console.log('==',binding)let minRows = binding.value.minRows;let maxRows = binding.value.maxRows;if (el.scrollTop == 0) el.scrollTop = 1;while (el.scrollTop == 0) {if (el.rows > minRows) el.rows--;else break;el.scrollTop = 1;if (el.rows < maxRows) el.style.overflowY = "hidden";if (el.scrollTop > 0) {el.rows++;break;}}while (el.scrollTop > 0) {if (el.rows < maxRows) {el.rows++;if (el.scrollTop == 0) el.scrollTop = 1;} else {el.style.overflowY = "auto";break;}}}}
});export { autoresize };

main.js中

import { autoresize } from '@/utils/autoResize.js'
...
Vue.use(autoresize)

使用：

<textarea v-autoresize="{ minRows: 2, maxRows: 10,data:dataAddForm.xxx}"class="el-textarea__inner"v-model.lazy="dataAddForm.xxx"placeholder="请输入"></textarea>

输入完旁边点一下就自己展开了

本文标签： 记录el

版权声明：本文标题：【记录】el 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700324473a397226.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。