web端的复制粘贴

最新推荐文章于 2024-04-08 09:42:57 发布

sameen1900

最新推荐文章于 2024-04-08 09:42:57 发布

阅读量495

点赞数

文章标签： vue.js typescript npm

本文链接：https://blog.csdn.net/qq_38526167/article/details/129331747

版权

文章介绍了如何在Vue应用中集成clipboard.js库来实现文本复制功能。首先通过npm安装，然后在组件内导入并使用，接着在模板中创建复制按钮，并绑定数据和事件处理方法。当点击按钮时，会触发复制操作，并显示相应的成功或失败通知。

摘要由CSDN通过智能技术生成

我主要用了clipboard.js

第一步：安装：npm install clipboard --save

第二步：在需要用到的.vue文件内导入：import Clipboard from "clipboard";

第三步：需要用到的地方加按钮：

举例：在表格中循环加复制按钮

<template >
    <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              style="width: 100%;">
            
            <el-table-column label="中文内容" align="center" prop="textCHN"
                 :show-overflow-tooltip="true" width="200" >
                <template slot-scope="scope" >
                <div>{{ scope.row.textCHN }}</div >
               //在这我要复制{ scope.row.textCHN }}所以下面设置了动态:id，用code作为变化的值
                <button :id="'tag-read'+scope.row.code" class="el-button  el-button--primary el-button--mini":data-clipboard-text="scope.row.textCHN"
@click="copy('tag-read'+scope.row.code)" >复制</button >


              </template >
            </el-table-column >
            
      </el-table >
</template >
<script>
import Clipboard from "clipboard";
export default {
    methods: {
  //  复制文本

    copy (id) {

      var clipboard = new Clipboard("#" + id);
      clipboard.on("success", e => {
        console.log(e);

        this.$notify({
          title: "复制成功",
          message: "",
          type: "success",
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        console.log(e);
        // 不支持复制
        this.$notify({
          title: "该浏览器不支持自动复制",
          message: "",
          type: "success",
        });

        // 释放内存
        clipboard.destroy();
      });

    }
  }
},
</script>