Vue - 将文本复制到粘贴板中

请叫我背影男神

已于 2022-10-21 15:49:38 修改

阅读量390

点赞数 1

分类专栏： # Vue 文章标签： Vue 复制到剪切板

于 2022-10-21 15:43:47 首次发布

本文链接：https://blog.csdn.net/hutuyaoniexi/article/details/127447831

版权

Vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、效果

二、HTML

<!-- 提取sql对话框 -->
    <el-dialog :title="extract.title" :visible.sync="extract.open" :close-on-click-modal="false" width="800px" append-to-body>
      <el-button
        type="primary"
        plain
        @click="onCopyResult"
      >一键复制</el-button>
      <pre>{{extract.content}}</pre>
      <div slot="footer" class="dialog-footer">
        <el-button @click="extract.open = false">关 闭</el-button>
      </div>
    </el-dialog>

三、JavaScript

/**一键复制*/
    onCopyResult() {
      this.copyToClipboard(this.extract.content);
      this.$message({
        message: "你已成功复制",
        type: "success",
        center: true,
      });
    },
    // 点击复制到剪贴板函数
    copyToClipboard(content) {
      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
    },