东莞网站建设策划,企业网站推广策划方法,怎么查企业注册信息,wordpress 时光轴插件目录 1、需求2、实现思路:3、控件绑定粘贴事件事件修饰符说明: 4、代码实现#x1f680;写在最后 1、需求
在 Vue 2 和 Element UI 中#xff0c;要实现从 Excel 复制空格分隔的数据#xff0c;并在粘贴到输入框#xff08;el-input#xff09;时自动转换为逗号分隔的数据… 目录 1、需求2、实现思路:3、控件绑定粘贴事件事件修饰符说明: 4、代码实现写在最后 1、需求
在 Vue 2 和 Element UI 中要实现从 Excel 复制空格分隔的数据并在粘贴到输入框el-input时自动转换为逗号分隔的数据
2、实现思路:
el-input/ 组件是由外层 div 和内层的 input组成的, 根据浏览器的事件传递机制(先捕获,后冒泡):粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件,在 paste 事件处理函数中获取剪贴板中的文本数据将空格分隔的数据转换为逗号分隔的数据将转换后的数据赋值给 v-model 绑定的变量。 3、控件绑定粘贴事件 el-inputv-modelstoresNameclearablestylemargin-left: 6px;width: 40remplaceholder请输入编码或名称多项输入以英文,号间隔classdetails-inputpaste.nativehandlePaste/事件修饰符说明:
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 中所有连续的空白字符替换为一个英文逗号 ,。 参考文章 elementui输入控件绑定粘贴事件对复制数据做处理 阻止element组件中的的粘贴功能 vue element-ui 后台中实现点击按钮将文本内容复制到剪贴板
写在最后 希望我的分享能够帮助到更多的人如果觉得我的分享有帮助的话请大家一键三连支持一下哦~ ❤️原创不易期待你的关注与支持~ 点赞收藏⭐️评论✍️ 之后我会继续更新前端学习小知识关注我不迷路~
