版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章目录
一、vue-clipboard2 (clipboard.js) 简介
1、简介
clipboard.js 是一个不需要Flash，就能实现文本复制或者剪切到剪切板的轻量级插件。
- clipboard.js 官网: http://www.clipboardjs.cn/
- clipboard.js Github: https://github.com/zenorocha/clipboard.js
vue-clipboard2 是一个基于 clipboard.js 封装的，可以轻松地在 vue 项目中使用（包含全局指令）
- vue-clipboard2 npm 地址： https://www.npmjs.com/package/vue-clipboard2
2、兼容性
虽然要求Safari版本在10以上，但是作者做了很好的优雅降级：
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.
也就是说，Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：
clipboard.on('error', function(e) {
alert('请选择“拷贝”进行复制!')
});
Safari版本在10以下的效果：
在 alert(‘请选择“拷贝”进行复制!’) 之后，待复制的文字会自动选中，然后弹出系统本身的tooltip
效果如下：
二、使用方法 Demo
1、clipboard.js 的使用
(1) 引入 clipboard.js
- CDN引入：
// jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
// cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
// RawGit (Deprecated - Will work till October 2019)
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>
// GitHack (Based on RawGit)
<script src="https://rawcdn.githack.com/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>
// unpkg
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
- 直接下载 ZIP 文件
(2) 实例化 ClipboardJS 对象
(3) CallBack
(4) 最后上Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
2、vue-clipboard2 的使用
(1) 引入
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
(2) Demo
- 第一种指令方式
<div id="app"></div>
<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>
- 第二种
<div id="app"></div>
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button" @click="doCopy">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
}
})
</script>
三、模态框(弹窗)组件失效问题
Bootstrap 模态框（Modals）中，以及 Vue 各种 UI 框架的模态框中会出现此问题，因为他们都修改了焦点。
clipboard.js 解决方案
实例化的时候添加 container
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
vue-clipboard2 解决方案
在引入时增加一行
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)
觉得有帮助的小伙伴右上角点个赞~
