Vue 复制内容到系统剪切板

最新推荐文章于 2024-07-06 23:51:02 发布

nicepainkiller

最新推荐文章于 2024-07-06 23:51:02 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： Vue 复制内容到系统剪切板

本文链接：https://blog.csdn.net/nicepainkiller/article/details/90667650

版权

Vue 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

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

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

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

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

首先我们将web 依赖的 clipboard.js 引入项目中
因为 clipboard 插件必须依赖 input 或者 textarea 组件，所以我们需要给他专门添加一个以来组件
为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 都可以正常使用