安装
npm install --save vue-clipboard2
复制代码
使用
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
复制代码
没有特定按钮
在元素上绑定触发事件,方法中获取对象, 通过this.$copyText
复制
methods: {
copyData(){
//如果不需要回调:
this.$copyText(this.message)
//如果需要回调:
this.$copyText(this.message).then( e => {
alert('复制成功')
console.log(e)
}, function (e) {
alert('复制失败')
console.log(e)
})
}
}
复制代码
点击特定元素
点击元素触发复制,将copy内绑定的属性的值添加到剪贴板
<input type="text" v-model="message">
<!-- copy内填写属性名 -->
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!</button>
复制代码
methods: {
//复制成功的回调
onCopy: e => {
alert('你成功复制了: ' + e.text)
},
//复制失败的回调
onError: e => {
alert('复制失败')
}
}