一个简单的Vue.js2绑定clipboard.js插件
安装依赖:
npm install --save vue-clipboard2
用法:
对于vue-cli用户:
import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
对于独立使用:
<script src="vue.min.js"></script>
<!-- 必须在vue.js之后放置这一行 -->
<script src="dist/vue-clipboard.min.js"></script>
Demo:
<template id="demo">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#demo',
data: function () {
return {
message: '啦啦啦,这是复制的内容!'
}
},
methods: {
onCopy: function (e) {
console.log('你刚刚复制: ' + e.text)
},
onError: function (e) {
console.log('无法复制文本!')
}
}
})
</script>