【Vue】使用clipboard实现复制文本到剪贴板

需求如下：假设有这样的列表，我们希望能够点击复制通知链接按钮，将表格中通知链接列的内容复制到剪贴板，毕竟通知链接的内容比较多，能够复制的话，该列就可以不用展示出来。

1、安装clipboard

npm install clipboard --save

查看是否安装成功，以及查看安装的版本，可以通过查看package.json文件

2、在页面的script标签中进行引入即可使用

<script>
import Clipboard from 'clipboard';
</script>

3、表格部分代码

<el-table ref="multipleTable" :data="versions" stripe style="width: 100%;"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" v-if="hasPermission('version:delete')">
    </el-table-column>
    <el-table-column prop="id" label="文件id" v-if="false">
    </el-table-column>
    <el-table-column prop="fileName" label="文件名">
    </el-table-column>
    <el-table-column prop="version" label="版本">
    </el-table-column>
    <el-table-column prop="branchType" label="版本分支" min-width="70%">
    </el-table-column>
    <el-table-column prop="clientType" label="客户端类型" min-width="70%">
    </el-table-column>
    <el-table-column prop="fileSize" label="文件大小">
    </el-table-column>
    <el-table-column prop="publishTime" label="发布时间" min-width="70%">
    </el-table-column>
    <el-table-column prop="downloadCount" label="下载次数">
    </el-table-column>
    <el-table-column prop="note" label="变更日志" v-if="show">
    </el-table-column>
    <el-table-column prop="notifyUrl" label="通知链接" >
    </el-table-column>
    <el-table-column label="操作" min-width="100%">
      <template slot-scope="scope">
        <el-button @click="deleteVersion(scope.row)" type="text" v-if="hasPermission('version:delete')">删除</el-button>
        <el-button @click="editVersion(scope.row)" type="text" v-if="hasPermission('version:edit')">编辑</el-button>
        <el-button class="tag-read" type="text" @click="copy(scope.$index)">复制通知链接</el-button>
        <el-button @click="checkNote(scope.$index)" type="text" >查看变更日志</el-button>
        <el-button @click="checkQrCode(scope.$index)" type="text" >查看二维码</el-button>
      </template>
    </el-table-column>
  </el-table>

4、copy( )方法代码

// 操作：复制通知链接
    copy(index) {
        var Url = this.versions[index].notifyUrl;
        var clipboard = new Clipboard('.tag-read', {
            text: function() {
                return Url;
            }
        });
        clipboard.on('success', e => {
          tips(this, '复制成功!', 'success');
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          tips(this, '该浏览器不支持自动复制!', 'warning');
          // 释放内存
          clipboard.destroy()
        })
      }

5、效果如下：

打开浏览器，即可复制网址

【Vue】使用clipboard实现复制文本到剪贴板

猜你喜欢