版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mr_EvanChen/article/details/81034065
需求如下:假设有这样的列表,我们希望能够点击复制通知链接按钮,将表格中通知链接列的内容复制到剪贴板,毕竟通知链接的内容比较多,能够复制的话,该列就可以不用展示出来。
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、效果如下:
打开浏览器,即可复制网址