Vue 复制内容到系统剪切板

                                            Vue 复制内容到系统剪切板板

在具体生产环境中，经常会遇到将内容复制到剪切板的 使用情况。由于我们项目是  h5+ 的项目。会打包成App;

有时候在网页版中使用该功能是OK的，但是 发布成APP 在 IOS中功能就不好使了。

在这里我们 将 复制到剪切板 功能 细分为 在Web中 和APP中两种情况来实现

 

1. 首先我们将web 依赖的 clipboard.js 引入项目中
2. 因为 clipboard 插件必须依赖 input 或者 textarea 组件，所以我们需要给他 专门添加一个 以来组件
3. 为APP 实现 复制到剪切板功能

 

安装 clipboard

npm install clipboard --save

引入 vue 中

import Clipboard from 'clipboard';

为 clipboard 创建一个 textarea 并且设置属性 不影响现有布局

<!-- 依赖组件 -->
<textarea style="opacity:0; z-index=-10" id="input"></textarea>
<!-- 事件触发组件 -->
<div class="btn" data-clipboard-target="#input" v-on:click="CopyMsg()">复制地址</div>

具体的实现 复制到剪切板  函数

//this.userData.BlockCAddress 需要复制的数据
CopyMsg() {
    //App
    if (window.plus) {
        if (this.mui.os.ios) {
            //ios 
            let UIPasteboard = plus.ios.importClass("UIPasteboard");
            let generalPasteboard = UIPasteboard.generalPasteboard();
            //设置/获取文本内容: 
            generalPasteboard.plusCallMethod({
                setValue: this.userData.BlockCAddress,
                forPasteboardType: "public.utf8-plain-text"
            });
            generalPasteboard.plusCallMethod({
                valueForPasteboardType: "public.utf8-plain-text"
            });
            this.mui.toast("已成功复制到剪贴板");
        } else {
            //安卓 
            let context = plus.android.importClass("android.content.Context");
            var main = plus.android.runtimeMainActivity();
            var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
            plus.android.invoke(clip, "setText", this.userData.BlockCAddress);
            this.mui.toast("已成功复制到剪贴板");
        }

    } else {
        //网页


        document.getElementById("input").innerText = this.userData.BlockCAddress;
        let clipboard = new Clipboard('.btn');
        clipboard.on("success", (e) => {
            mui.toast("已成功复制到剪贴板");
        })
        clipboard.on("error", (e) => {
            this.mui.alert('请在APP中使用该功能', '章鱼世界', null)
        })
    }
}

经过测试 在 网页中， APP中 Android IOS  都可以正常使用