场景:
在使用鼠标右键或者ctrl c的时候。光标会自动换行。粘贴出来的数据光标应该在红色部分,却出现在了黑色部分。
方法一:
html标签不要换行;css去除空格;
white-space: nowrap;
方法二:
使用函数对复制的内容进行修改。同理即可在复制文本后追加产权标签等等。
mounted() {
document.addEventListener('copy', function (e) {
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
let clipboardData = e.clipboardData || window.clipboardData;
// 如果 未复制或者未剪切,直接 return
if (!clipboardData) return;
// Selection 对象 表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString();
if (text) {
// 如果文本存在,首先取消默认行为
e.preventDefault();
// 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本
// format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
// data 一个 DOMString 表示要添加到 drag object 的数据
clipboardData.setData('text/plain', text.trim())
}
})
},
beforeDestroy() {
document.removeEventListener('copy', function (e) {
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
let clipboardData = e.clipboardData || window.clipboardData;
// 如果 未复制或者未剪切,直接 return
if (!clipboardData) return;
// Selection 对象 表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString();
if (text) {
// 如果文本存在,首先取消默认行为
e.preventDefault();
// 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本
// format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
// data 一个 DOMString 表示要添加到 drag object 的数据
clipboardData.setData('text/plain', text.trim()) 在这追加信息
}
})
}