移动端一键复制功能

1.第一步先获取dom元素,给他加上手指按下事件,需要注意的是获取到元素后加上【0】这样才能调用里面的事件。

 2.再然后就是用到mui.js文件了(专门调用手机的一些方法事件,比如分享,转发之类)

可以去官网https://github.com/dcloudio/mui下载mui

 完整代码在最后!

vue版本引入如下:

1.下载

 2.可以放到项目里面

 3.放到main.js里面

 4.在页面中使用

 发现报错

 解决办法:

在项目中安装插价babel-plugin-transform-remove-strict-mode,控制台进入我们的项目文件,运行以下指令:
npm i babel-plugin-transform-remove-strict-mode -d

之后在项目的babel的配置文件.babelrc添加如下配置:

  最终代码:

var divs=$("#ywdz")[0];
     divs.addEventListener("touchstart",shwoMsg);
     function showMsg(ev) {
       var textBox = $("#ywdz").text();
       copy_fun(textBox);
     }
     function copy_fun(copy,tips) {
       if(!tips){
         tips="已成功复制到剪切板";
       }

       mui.piusReady(function () {
        //  判断是安卓还是ios
        if(mui.os.ios){
         
         var UIPasteboard = plus.ios.importClass("UIPasteboard");

         var generalPasteboard = UIPasteboard.generalPasteboard()

        //  设置/获取文本内容

        generalPasteboard.plusCallMethod({
          setValue:copy,

          forPasteboardType:"public.utf8-plain-text",
        });

        generalPasteboard.plusCallMethod({
          valueForPasteboardType:"public.utf8-plain-text",
        });

        mui.toast(tips);
        }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);

          mui.toast(tips);
        }
       })
     }

猜你喜欢

转载自blog.csdn.net/qq_47629187/article/details/124702281