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

#GZ

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

阅读量406

点赞数

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

本文链接：https://blog.csdn.net/JINGZzhuo/article/details/125912870

版权

前端开发剪贴板API 事件处理文本复制用户交互

关键词由CSDN通过智能技术生成

最近实现了一个小功能——复制文本到剪贴板: 具体实现步骤有以下几步
在这里插入图片描述
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",
        });
      });