vue实现复制粘贴

1.安装clipboard:npm install clipboard
2.src/utils/clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'
function clipboardSuccess() {
console.log('success')
Vue.prototype.$message({
message: 'Copy successfully',
type: 'success',
duration: 1500
})
}

function clipboardError() {
console.log('error')
Vue.prototype.$message({
message: 'Copy failed',
type: 'error'
})
}
export default function handleClipboard(text, event) {
const clipboard = new Clipboard(event.target, {
text: () => text
})
clipboard.on('success', () => {
clipboardSuccess()
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError()
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(event)
}

3.vue的代码

<template>
<div class="app-container">
<el-tabs>
<el-tab-pane label="直接使用剪切板">
<div class="el-tab-pane" >
<el-input v-model="inputData" style='width:400px;'></el-input>
<el-button @click="handleCopy(inputData,$event)">复制</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>

<script>
import clip from '@/utils/clipboard'
export default {
name: "index",
data(){
return {
inputData:""
}
},
methods:{
handleCopy(text, event) {
clip(text, event)
console.log('clicp')
}
}
}
</script>