Vue监听浏览器自带的复制事件并对复制内容进行修改

场景：

在使用鼠标右键或者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())  在这追加信息
            }
        })
    }

?