elementui输入控件绑定粘贴事件对复制数据做处理
一、监听输入框粘贴事件
1.1、粘贴事件
//输入框粘贴事件
inputPaste(event, obj, prop) {
var pastedText = undefined
if (event.clipboardData && event.clipboardData.getData) {
pastedText = event.clipboardData.getData('Text');
} else {
pastedText = event.originalEvent.clipboardData.getData('Text');
}
//去空格处理
pastedText = pastedText.replace(/(^\s*)|(\s*$)/g, '');
//完美赋值,无问题
this.$nextTick(_ => {
event.target.value = pastedText;
//赋值需要在全局变量在对象之内
this.$set(obj, prop, pastedText);
});
//延迟赋值,待界面默认渲染效果结束后赋值 赋值有bug
/* setTimeout(_ => {
event.target.value = pastedText
this.$set(obj, prop, pastedText);
this.$forceUpdate();
}, 100); */
},
1.2、控件绑定粘贴事件
<el-input v-model="seachInfo.orderNo" @paste.native="inputPaste($event,seachInfo,'orderNo')"/>
二、监听网页全局复制事件
另行一种思路,监听页面全局复制事件,对复制后的剪贴板数据做处理
document.addEventListener('copy', (e) => {
if (this.isCopy) {
this.isCopy = false;
// this.copyToClipboard('复制成功');
} else {
e.preventDefault();
let clipboardStr = window.getSelection(0).toString();
console.log('clipboardStr: ', clipboardStr);
clipboardStr = clipboardStr.replace(/(^\s*)|(\s*$)/g, '');
//改变剪贴板内的数据 begin
if (window.clipboardData) {
window.clipboardData.setData("text", clipboardStr);
} else {
(function (clipboardStr) {
document.oncopy = function (e) {
e.clipboardData.setData("text", clipboardStr);
e.preventDefault();
document.oncopy = null;
};
})(clipboardStr);
document.execCommand("Copy");
}
//改变剪贴板内的数据 end
}
});