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

1、需求

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

2、实现思路:

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

在这里插入图片描述

3、控件绑定粘贴事件

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

事件修饰符说明:

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

4、代码实现

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

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

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

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

+：表示匹配一个或多个前面的字符（在这里是 \s）。

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

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

鼠标光标定位在文本末尾

    handlePaste(e) {e.preventDefault()const text = (e.originalEvent || e).clipboardData.getData('text/plain').trim()const replacedText = text.replace(/\s+/g, ',')// this.storesName = replacedText// 获取光标位置（在textarea中）const start = e.target.selectionStartconst end = e.target.selectionEnd// 插入文本到光标位置this.storesName = this.storesName.slice(0, start) + replacedText + this.storesName.slice(end)// 将光标位置移动到新插入文本的末尾e.target.setSelectionRange(start + replacedText.length, start + replacedText.length)},

鼠标光标定位在新粘贴的文本末尾

    handlePaste(e) {e.preventDefault()// 获取剪贴板中的文本const text = (e.originalEvent || e).clipboardData.getData('text/plain')// 替换文本中的空格const replacedText = text.replace(/\s+/g, ',')// 获取textarea元素和光标位置const textarea = e.targetconst start = textarea.selectionStartconst end = textarea.selectionEnd// 插入文本到光标位置// 先保存当前textarea的值const oldValue = textarea.value// 更新textarea的值为新文本textarea.value = oldValue.slice(0, start) + replacedText + oldValue.slice(end)// 将光标位置移动到新插入文本的末尾textarea.setSelectionRange(start + replacedText.length, start + replacedText.length)// 如果您也使用Vue的data属性来保存textarea的值，更新它this.storesName = textarea.value},