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

导读:本篇文章讲解 Vue – 将文本复制到粘贴板中,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、效果

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

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

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

 二、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");
      }
    },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/117215.html

(0)
seven_的头像seven_bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!