vue-clipboard2 (clipboard.js) 详解及模态框组件中失效解决方案

一、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

// cdnjs

// RawGit (Deprecated - Will work till October 2019)

// GitHack (Based on RawGit)

// unpkg

• 直接下载 ZIP 文件

(2) 实例化 ClipboardJS 对象

(3) CallBack

(4) 最后上Demo

    
    


    
    
hello
    Copy

    
    

    
    

2、vue-clipboard2 的使用

(1) 引入

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
 
Vue.use(VueClipboard)

(2) Demo

• 第一种指令方式

• 第二种

三、模态框(弹窗)组件失效问题

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)

觉得有帮助的小伙伴右上角点个赞~

扫描上方二维码关注我的订阅号~