注: 依賴第三方插件 clipboard
一、安裝插件
npm install vue-clipboard2 --save
二窘行、全局注入(main.js)
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
三饥追、使用
<template>
<div class="App">
<el-input v-model="value"></el-input>
<span class="copy-btn" v-clipboard:copy="value" v-clipboard:success="onCopy" v-clipboard:error="onError">復(fù)制</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
value: null,
};
},
methods: {
// 復(fù)制成功時(shí)的回調(diào)函數(shù)
onCopy(e) {
this.$message.success("內(nèi)容已復(fù)制到剪切板!")
},
// 復(fù)制失敗時(shí)的回調(diào)函數(shù)
onError(e) {
this.$message.error("抱歉抽高,復(fù)制失斉懈!")
}
}
}
</script>
注:value是復(fù)制的內(nèi)容