vue项目如何实现复制粘贴剪切板功能–vue-clipboard2
- 先安装
npm install --save vue-clipboard2
oruse dist/vue-clipboard.min.js
- main.js添加
import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
- 第一种方式
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
onCopy: function (e) {
alert('You just copied: ' + e.text)
},
onError: function (e) {
alert('Failed to copy texts')
}
}
})
</script>
4 第二种方式 点击事件
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button" @click="copyActiveCode($event,message )">Copy!</button>
</div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
copyActiveCode(e, text) {
const clipboard = new Clipboard(e.target, { text: () => text })
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' })
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
},
}
}
</script>