vue下复制页面文字，附带版权说明

最新推荐文章于 2024-04-23 17:46:54 发布

Onlyᝰ

最新推荐文章于 2024-04-23 17:46:54 发布

阅读量206

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/rb258369/article/details/137257369

版权

如图所示：

代码如下：

<template>
  <div class="index-container">
    我是index
    <!-- 这里是你想让用户复制的内容 -->
    <p ref="copyContent">This is the content that the user can copy.</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件加载完成后，添加copy事件监听器
    document.addEventListener("copy", this.handleCopy);
  },
  destroyed() {
    // 在组件销毁时移除copy事件监听器，以防止内存泄漏
    document.removeEventListener("copy", this.handleCopy);
  },
  methods: {
    handleCopy(event) {
      // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
      let clipboardData = event.clipboardData || window.clipboardData;
      // 如果未复制或者未剪切，则return出去
      if (!clipboardData) {
        return;
      }
      // Selection 对象，表示用户选择的文本范围或光标的当前位置。
      // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
      let text = window.getSelection().toString();
      if (text) {
        // 如果文本存在，首先取消文本的默认事件
        event.preventDefault();
        // 通过调用clipboardData对象的 setData(format, data) 方法；来设置相关文本
        // setData(format, data);参数
        // format
        // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
        // data
        // 一个 DOMString表示要添加到 drag object的数据。
        clipboardData.setData(
          "text/plain",
          text + "\n\n-----------\n rb 版权所有"
        );
      }
    },
  },
};
</script>

<style></style>

以上是vue中方法，原生JS中使用道理一样，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="UTF-8" />
    <title>标题</title>
  </head>
  <body>
    <div>用户复制内容：内容测试</div>
    <script>
      // 监听整个网页的copy(复制)事件
      document.addEventListener("copy", function (event) {
        // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
        let clipboardData = event.clipboardData || window.clipboardData;
        // 如果未复制或者未剪切，则return出去
        if (!clipboardData) {
          return;
        }
        // Selection 对象，表示用户选择的文本范围或光标的当前位置。
        //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
        let text = window.getSelection().toString();
        if (text) {
          // 如果文本存在，首先取消文本的默认事件
          event.preventDefault();
          // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本

          // setData(format, data);参数
          // format
          // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
          // data
          // 一个 DOMString表示要添加到 drag object的数据。
          clipboardData.setData(
            "text/plain",
            text + "\n\n-----------\n rb 版权所有"
          );
        }
      });
    </script>
  </body>
</html>