使用 clipboard 实现一键复制

https://clipboardjs.com/

安装依赖：

npm install clipboard --save

在 HTML 层次进行复制：

//①引入包
import ClipboardJS from "clipboard";
//②通过 new 来实例化一次
mounted(){
    new ClipboardJS('.btn');
},
//③直接使用
<h4 id="copy" value="http://www.baidu.com">http://www.baidu.com</h4>
<el-button class="btn" data-clipboard-target="#copy">一键复制</el-button>

通过 new 来实例化这个按钮，按钮通过属性 data-clipboard-target 在触发器元素中添加属性来实现，触发器会自动去寻找你指定的 id 元素，这个元素标签上的 value 就是你要复制的值。

电脑剪切板里面复制之前的数据是用户昵称，当我点一键复制的时候，被复制标签内容被选中。复制成功。

可以定义一个data-clipboard-action属性来指定是否要copy或cut内容。如果省略此属性，copy将默认使用。cut操作仅对<input>或起作用<textarea>。

改动代码如下：

<el-input style="width:200px;" id="copy" v-model="value"></el-input>
<el-button class="btn" data-clipboard-target="#copy" data-clipboard-action="cut">一键复制</el-button>

可以不复制其他内容，只复制你指定的内容。通过 data-clipboard-text 来实现，改動代碼如下：

<el-button class="btn" data-clipboard-text="自定義内容">一键复制</el-button>

自定义复制内容

某些情况下，我们想反馈用户在复制/剪切操作是否成功的交互效果。就类似下面这样：

核心代码思路，不用讲一看你就懂：

<span id = 'copyWallet'>需要被复制的内容</span>
<el-button
    type="text"
    data-clipboard-target="#copyWallet"
    @click="copyWalletActive()"
    id="copyButton"
>复制</el-button>
<=======分割线=======>
copyWalletActive() {
    this.$nextTick(()=>{
        const clipboard = new Clipboard("#copyButton");
        clipboard.on('success', e => {
            this.$message({ type: 'success', message: '复制成功' });
            // 释放内存
            clipboard.destroy();
        });
        clipboard.on('error', e => {
            // 不支持复制
            this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
                // 释放内存
            clipboard.destroy();
        });
    });
}

到这里遇到一个比较头疼的问题，当我们点击复制的时候，发现被复制的文字会默认被选中，就是去不掉，那只能另外想办法了，我想的办法是再放一个和被复制标签一样的一样标签，然后通过 overflow:hidden; 来隐藏，实验结果是不行，复制功能都失效了，那只能通过定位，让元素飞出屏幕。代码如下：

<span>需要被复制的内容</span>
<span style="position:fixed;top:-1000000px;" id = 'copyWallet'>需要被复制的内容</span>

这次终于成了。

怎么点都不怕

解决遗留的bug

上面留的那个头疼的问题，我当时写的时候就知道不能这么玩，但是为了生产没办法，无论好看与否业务能写出来就行了，今天吧官方文档看了下，里面讲的清清楚楚。只是这些破文档不像小说人人能看懂，人人能理解。

看看官网描述的高级用法：

如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

如果你不想修改 HTML，这里指的就是默认情况下复制会选中文本。来看看用法：

this.$nextTick(()=>{
    let that = this;
    const clipboard = new Clipboard("#copyButton",{
        text:()=>{
            return that.$refs.copyWallet[0].innerHTML;
        }
    });
    clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' });
        // 释放内存
        clipboard.destroy();
    });
    clipboard.on('error', e => {
        // 不支持复制
        this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
            // 释放内存
        clipboard.destroy();
    });
});

就增加了一个函数用函数的返回值来替代默认行为。有点像 get 和 set 的意思。

补充时间：2020年1月2日20:04:12