clipboard-vue
一个简单的基于clipboard.js
开发的可以在VUE2.x使用的复制文本插件
安装
npm install --save clipboard-vue
或者引入
<script src="dist/clipboard-vue.min.js"></script>
开始使用
全局引入:
// main.js
import Vue from 'vue'
import VClipboard from 'clipboard-vue'
Vue.use(VClipboard)
组件内按需引入:
// component.vue
import { copy, copyText } from 'clipboard-vue'
// copy 复制指令
// copyText 复制函数
export default {
name: 'ComponentName',
directives: {
// 注册指令
copy
},
methods: {
clickHandle() {
copyText('copy content').then(e => {
...
}).catch(e => {
...
})
}
}
...
}
单独引入:
<!-- index.html -->
<script src="vue.min.js"></script>
<script src="dist/clipboard-vue.min.js"></script>
<script>
Vue.use(VClipboard)
new Vue({
...
})
</script>
复制没有特定按钮的文本
您可以使用我们的新方法来做到这一点 this.$copyText。请参阅 Example,其中我们将剪贴板指令替换为v-on指令。
现代浏览器有一些局限性,例如window.open
没有用户交互就无法使用。因此,复制内容也有相同的限制!在使用前对其进行测试。确保您没有在任何异步方法中使用此方法。
在 bootstrap 的 modals 使用失效?
参阅 clipboardjs 文档, 使用container
选项如下所示:
let container = this.$refs.container
this.$copyText("Text to copy", container)
例子 1
// main.js
Vue.use(VClipboard)
new Vue({
el: '#app',
data: function () {
return {
message: '复制的内容'
}
},
methods: {
// 使用 v-copy 指令复制
copySuccess() {
// 复制成功回调
console.log('copy success')
},
copyError() {
// 复制失败回调
console.log('copy error')
},
// 使用函数的方式复制
copyFuction(text) {
this.$copyText(text).then(e => {
// 复制成功
console.log('copy succ!')
}).catch(e => {
// 复制失败
console.log('copy err!')
})
}
}
})
例子 2
<template>
<div class="container">
<input type="text" v-model="message">
<button type="button" v-copy="message" v-copy:success="copySuccess" v-copy:error="copyError">使用指令复制!</button>
<!-- 剪切的变相实现 -->
<button type="button" v-copy="message" v-copy:success="cutSuccess">剪切!</button>
<button type="button" @click="copyFuction(message)">使用copyText复制</button>
</div>
</template>
<script>
import { copy, copyText } from 'clipboard-vue'
export default {
name: 'Example',
data() {
return {
message: 'Copy These Text'
}
},
directives: {
copy
},
methods: {
// 使用 v-copy 指令复制
copySuccess() {
// 复制成功回调
console.log('copy success')
},
copyError() {
// 复制失败回调
console.log('copy error')
},
// cut 剪切的实现
cutSuccess() {
this.message = ''
console.log('cut success')
},
// 使用函数的方式复制
copyFuction(text) {
this.$copyText(text).then(e => {
// 复制成功
console.log('copy succ!')
}).catch(e => {
// 复制失败
console.log('copy err!')
})
}
}
}
</script>
您可以使用 Vue实例 vm.$el
通过通常的遍历方法来获取DOM元素,例如:
this.$el.children[1].children[2].textContent
这将允许您访问组件的渲染内容,而不是组件本身。
贡献
欢迎公关,以及问题!如果您想要我们目前没有的任何功能,请针对功能请求提出问题。