1. 安装vue-clipboard2
1. npm install --save-dev vue-clipboard2
2. main.js中添加 Vue挂载
//复制到粘贴板插件
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
3. 组件中使用
<template>
<div>
<input type="text" v-model="copyUrl" />
<button type="button" class="btn"
v-clipboard:copy="copyUrl"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
复制链接
</button>
</div>
</template>
<script>
export default {
data() {
return {
copyUrl:'http://baidu.com'
};
},
methods: {
onCopy(e) {
console.log(复制成功!);
},
onError(e) {
console.log(复制失败!);
}
}
};
</script>