vue、ts实现复制文本添加自选内容实践

我们在网上复制别人代码的时候经常会出现下面这种情况

function setClipboardText(value) {
    const text = document.createElement('textarea');
    text.value = value;
    document.body.appendChild(text);

————————————————
版权声明：本文为CSDN博主的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40794973/article/details/118644147

网站都会给自己家做个小广告，增添一些内容，今天就来小小实践一下，上html

<template>
    <h1>测试复制黏贴功能</h1>
    <div class="codeView" @copy="copy($event)">
        <p>就是那个复制黏贴的时候会把网址和作者带上的功能</p>
        <p>--------下面是我们的测试文字-------------</p>
        <h1>挖阿萨达</h1>
        <p>阿萨擦爱上大大大大是成分其实擦擦擦擦重庆市擦擦擦</p>
        <p>模拟年的上传参数参数大声读出参数的测试动词三单从</p>
    </div>
</template>

 非常简单的小盒子，我们给copy加上了copy事件，然后传入了event参数，当然你也可以选择给整个页面添加copy事件

<script lang="ts" setup>
import { ref } from 'vue'
let author = ref<string>("作者：黄烽")
let shuoming = ref<string>("版权所有，盗版必究，你复制黏贴的时候看着办")

let copy = (e: ClipboardEvent) => {
    e.preventDefault() //一定要阻止默认行为，否则不会显示自定义的内容，当然你可以在标签里面使用.prevent修饰符
    // 获取我选中的内容,然后字符串化
    let selectPart = window.getSelection()?.toString()
    // 对选中内容进行魔改，添加自己的内容
    let myContent = `${selectPart}\n${"——————————————"}\n${author.value}\n${window.location.href}\n${shuoming.value}`
    console.log(myContent);
    // 设置剪切板的数据
    e.clipboardData?.setData('text/plain', myContent)
}
</script>

然后你复制的内容就会变成这样

挖阿萨达
阿萨擦爱上大大大大是成分其实擦擦擦擦重庆市擦擦擦

模拟年的上传参数参数大
——————————————
作者：黄烽
http://localhost:3000/#/TestView15
版权所有，盗版必究，你复制黏贴的时候看着办

当然，还是有一些问题需要解决的，比如

getSelection和clipboardData在不同的浏览器中可能有兼容问题

其他浏览器可能支持对文本的多选

如果复制的内容中有图片应该如何处理

只是一个chrome上的小小的尝试