JSX语法下添加复制功能

我们的优惠代码原先设置为纯数字，所以没整复制功能，现在不行了，整整12位乱序字符串，不加复制，我一个前端都想跟自己拼命。闲话就扯这么多，接下来进入正菜。

---

---

clipboardjs介绍

这是一款无需考虑兼容性（暂时不用），且gzip压缩后只有3kb大小的很好切合需求的第三方组件，貌似就用这个吧。

安装

npm install clipboard --save or cnpm i clipboard --save（使用阿里镜像源，速度快）

引用

在需要使用的文件顶部引用：
import Clipboard from 'clipboard';

使用

属性名	说明	例子
data-clipboard-target	设定需要复制的元素，设置方式类似css选择器
data-clipboard-text	设定需要复制的内容
data-clipboard-action	cut / (默认不设置)复制

cube-ui内的Dialog组件

$createDialog 的第二个参数是 render 函数，一般用于处理插槽的场景；Dialog 组件提供了 2 个具名的插槽 title 和 content，分别用来分发标题和内容。

所以我们就要处理这个render函数。

import Clipboard from 'clipboard';
import { Dialog, Toast } from 'cube-ui';

/**
 * 优惠码dialog
 * @param {string} code 优惠码
 */
function showCodeDialog(code) {
    Dialog.$create(
        {
            type: 'alert',
            icon: 'cubeic-message',
            title: '优惠码',
            confirmBtn: {
                text: '我知道了',
                active: true
            }
        },
        createElement => {
            return [
                createElement(
                    'p',
                    {
                        class: {
                            'dialog-code_content': true  // 设置class样式
                        },
                        // 普通的 HTML 特性
                        attrs: {
                            id: 'codeCopy',
                            'data-clipboard-text': code  // 关键，在这里设定可以复制的优惠码code
                        },
                        slot: 'content',
                        // 事件监听器在 `on` 属性内，
                        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
                        // 需要在处理函数中手动检查 keyCode。
                        on: {
                        	// 添加点击事件，复制成功后有成功提示toast
                            click: () => {
                                let clipboard = new Clipboard('#codeCopy');  // 确定目标元素为 codeCopy, 这里未使用 ‘.’，而是使用 '#'，为了性能考虑
                                clipboard.on('success', function() {
                                    Toast.$create({
                                        txt: '复制成功',
                                        type: 'correct',
                                        time: 1000
                                    }).show();
                                });
                                clipboard.on('error', function() {
                                    Toast.$create({
                                        txt: '复制失败',
                                        type: 'error',
                                        time: 1000
                                    }).show();
                                });
                            }
                        }
                    },
                    bunchCode
                )
            ];
        }
    ).show();
}

参考链接

[1] vue官方文档 深入数据对象
[2] cube-ui官方文档 Dialog
[3] clipboardjs官方文档 clipboardjs