一、Npm安装第三方插件:clipboard
npm install vue-clipboard2 --save
二、全局注入(main.js)
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
三、使用方法
<template>
<div class="App">
<el-input v-model="Content"></el-input>
<span class="copy-btn" v-clipboard:copy="Content" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
Content: null,
};
},
methods: {
// 复制成功时的回调函数
onCopy(e) {
this.$message.success("内容已复制到剪切板!")
console.log(e)
},
// 复制失败时的回调函数
onError(e) {
this.$message.error("抱歉,复制失败!")
console.log(e)
}
}
}
</script>