【element ui】input输入控件绑定粘贴事件,从 Excel 复制的数据粘贴到输入框(el-input)时自动转换为逗号分隔的数据

目录

1、需求

在 Vue 2 和 Element UI 中,要实现从 Excel 复制空格分隔的数据,并在粘贴到输入框(el-input)时自动转换为逗号分隔的数据

2、实现思路:

  1. <el-input/ >组件是由外层< div >和内层的< input>组成的,
    根据浏览器的事件传递机制(先捕获,后冒泡):粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input,
    因此可以在组件上捕获监听paste事件,
  2. 在 paste 事件处理函数中,获取剪贴板中的文本数据,
  3. 将空格分隔的数据转换为逗号分隔的数据,
  4. 将转换后的数据赋值给 v-model 绑定的变量。

3、控件绑定粘贴事件

html 复制代码
  <el-input
            v-model="storesName"
            clearable
            style="margin-left: 6px;width: 40rem"
            placeholder="请输入编码或名称,多项输入以英文,号间隔"
            class="details-input"
            @paste.native="handlePaste"
          />

事件修饰符说明:

native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了

4、代码实现

javascript 复制代码
    handlePaste(e) {
      // 阻止默认粘贴行为(可选,取决于你是否需要立即显示原始数据)
      e.preventDefault()
      // 获取剪贴板中的文本数据
      const text = (e.originalEvent || e).clipboardData.getData('text/plain').trim()
      console.log(text, '文本粘贴')
      // 将空格分隔的数据转换为逗号分隔的数据
      const replacedText = text.replace(/\s+/g, ',')
      // 将转换后的数据赋值给 inputValue
      this.storesName = replacedText
    },

handlePaste 方法会阻止默认的粘贴行为,然后获取粘贴板上的文本。接着,使用 String.prototype.replace 方法和一个正则表达式 \s+ 来匹配一个或多个空格字符,并将它们替换为英文逗号。最后,将处理后的文本赋值给 inputValue。

/\s+/g 是一个正则表达式,用于匹配一个或多个空白字符(包括空格、制表符、换行符等)。这个正则表达式使用了两个特殊的字符:

\s:匹配任何空白字符。

+:表示匹配一个或多个前面的字符(在这里是 \s)。

g:表示全局搜索,即替换所有匹配的项,而不仅仅是第一个。

在代码中,text.replace(/\s+/g, ',') 的作用是将字符串 text 中所有连续的空白字符替换为一个英文逗号 ,。

参考文章:
elementui输入控件绑定粘贴事件对复制数据做处理
阻止element组件中的的粘贴功能
vue element-ui 后台中实现点击按钮,将文本内容复制到剪贴板

🚀写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~

相关推荐
花花鱼3 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
落魄小二5 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
别拿曾经看以后~8 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
lfl183261621601 天前
el-date-picker 设置开始时间和结束时间
前端·vue.js·elementui
牛先森家的牛奶1 天前
elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法
前端·javascript·elementui
dy17172 天前
el-date-picker日期选择器动态设置日期
前端·vue.js·elementui
卡布叻_星星2 天前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui
加油小吃货2 天前
定义全局键盘监听事件,el-dialog中删除不可用
javascript·vue.js·elementui
梅子酱~3 天前
Vue 学习随笔系列十三 -- ElementUI 表格合并单元格
vue.js·学习·elementui
涔溪3 天前
监听el-table中 自定义封装的某个组件的值发现改变调用函数
前端·vue.js·elementui