1. 下载clipboard.js
npm install clipboard --save
2. 在main.js中引入
import Clipboard from 'clipboard';
Vue.prototype.clipboard = Clipboard;
3.在组件中使用
<template>
<div class="copy">
<div
class="copy-text"
data-clipboard-target="#code"
@click="copy()"
>
复制
</div>
<div id="code">
<pre>
<code>
<span><template></span>
<span><div></span>这是你想复制的文本<span></div></span>
<span></template></span>
</code>
</pre>
</div>
</div>
</template>
<script>
export default {
methods: {
copy() {
var clipboard = new this.clipboard('.copy-text');
clipboard.on('success', function(e) {
e.clearSelection();
alert('复制成功');
});
clipboard.on('error', function() {
alert('复制失败');
});
},
},
};
</script>
<style>
.copy {
background: white;
width: 100%;
height: 400px;
border: 1px solid #000;
}
.copy-text{
float: right;
margin-right: 20px;
cursor:pointer;
}
</style>
4. 代码解析
data-clipboard-target="#code"
e.clearSelection();
5.网页实际效果
点击复制后会弹出