1、利用document.execCommand(不推荐)
MDN这样描述；已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。MDN相关介绍
示例代码
<template>
<a @click.stop="copyVal('这是需要复制的内容')">点击复制</a>
</template>
<script>
export default {
methods: {
copyVal(text) {
let oInput = document.createElement('input');
oInput.value = text;
document.body.appendChild(oInput);
oInput.select();
document.execCommand('Copy');
this.$message({
message: '复制成功',
type: 'success'
})
oInput.remove();
}
}
</scripit>2、安装第三方插件方法clipboard（不推荐）
示例代码
<template slot-scope="scope">
<div>
<el-button class="copy-qb" @click="copyVal('这是需要复制的信息')">复制</el-button>
</div>
</template>
<script>
npm install clipboard --save
import Clipboard from 'clipboard';
export default {
methods: {
copyVal(text) {
let clipboard = new Clipboard('.copy-qb', {
text: () => {
return text
}
})
clipboard.on('success', () => {
this.$message.success('复制成功！')
clipboard.destroy()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制,请手动复制！')
clipboard.destroy()
})
}
}
}
</scripit>
3、Clipboard.writeText（推荐）
备注： 规范要求在写入剪贴板之前使用 Permissions API (en-US) 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的 API。有关详细信息，请查看浏览器兼容性和剪贴板可用性。MDN相关介绍
示例代码
<template>
<a @click.stop="copyVal('这是需要复制的内容')">点击复制</a>
</template>
<script>
export default {
methods: {
copyVal(text) {
navigator.clipboard.writeText(text).then(
success => {
this.$message.success('复制成功')
},
error=>{
this.$message.error('复制失败')
}
)
}
}
</scripit>