mui 点击长按复制文本

项目需要长按复制文本内容，由于也没仔细研究过 mui 所以就直接百度。 看到了 花落乱了流年 这篇博客 我就把这个博客的代码融合到自己的项目里，实现了复制的需求。

直接上代码

单独写到了一个 js 文件。首先把 长按事件 激活，因为默认是关闭的。我在里边添加了确认框，可以做到提醒用户的作用。在复制成功后边又有消息提醒。代码如下

// 激活长按按钮
mui.init({
    gestureConfig: {
        longtap: true, //默认为false
    }
});

// 使用mui的长按事件 我把我的复制元素 class 设置为copy-text
mui('body').on('longtap', '.copy-text', function () {
    // 每次触发事件就会使用 innerText 获取纯文本。
    var copy_content = this.innerText;
    // 加了一个确认框 让用户选择是否复制
    mui.confirm('您要复制内容吗？', '小禾CRM', ['取消', '复制内容'], function (e) {
        if (e.index == 1) {
            //判断是安卓还是ios
            if (mui.os.ios) {
                // ios 的方法 这个我没具体研究过 直接拿来用了
                var UIPasteboard = plus.ios.importClass("UIPasteboard");
                var generalPasteboard = UIPasteboard.generalPasteboard();
                //设置 复制的内容也就是 触发事件 innerText 获取的内容
                generalPasteboard.plusCallMethod({
                    setValue: copy_content,
                    forPasteboardType: "public.utf8-plain-text"
                });
                generalPasteboard.plusCallMethod({
                    valueForPasteboardType: "public.utf8-plain-text"
                });
                // 在上边都走完 给用户一个提示
                mui.toast('复制成功')
            } else {
                //安卓 的方法 这个我没具体研究过 直接拿来用了
                var context = plus.android.importClass("android.content.Context");
                var main = plus.android.runtimeMainActivity();
                var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
                plus.android.invoke(clip, "setText", copy_content);
                 // 在上边都走完 给用户一个提示
                mui.toast('复制成功')
            }
        }
    })
})
复制代码

我参考了QQ空间复制、网易云音乐评论复制。发现都是直接复制全部文本，并不是选择的，所以这样子完全符合现在主流需求。

使用起来也很简单 在需要用到复制的页面 引入上边的js文件，在把需要复制的元素上添加class。

转载于:https://juejin.im/post/5bcd7d64f265da0ab916005f