实现复制文本到剪贴板功能

#GZ

已于 2022-07-21 15:28:22 修改

阅读量500

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-07-21 15:22:24 首次发布

本文链接：https://blog.youkuaiyun.com/JINGZzhuo/article/details/125912870

版权

该博客介绍了如何在前端实现复制文本到剪贴板的功能，通过在el-table组件中使用el-input和事件处理函数copy，结合navigator.clipboard.writeText方法，成功实现了点击按钮即可将文本复制到剪贴板的操作，并在成功复制后显示成功提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近实现了一个小功能——复制文本到剪贴板: 具体实现步骤有以下几步
在这里插入图片描述
el-table代码如下

   <el-table-column
          width="500px"
          prop="category.linkJson"
          label="访问地址"
        >
          <template slot-scope="scope">
            <el-input
              :ref="`popovers-${scope.$index}`"
              style="width: 380px"
              v-model="scope.row.add"
              placeholder="请输入内容"
            >
              <i
                slot="suffix"
                @click.stop="copy(scope.$index)"
                style="
                  font-style: normal;
                  color: #1890ff;
                  cursor: pointer;
                  display: inline-block;
                  height: 28px;
                  line-height: 28px;
                "
                >复制</i
              >
            </el-input>
          </template>
        </el-table-column>

copy事件代码如下

     navigator.clipboard.writeText('复制的内容').then(() => {
        this.$message({
          message: "复制成功",
          type: "success",
        });
      });