uniapp h5页面 在移动端 使用clipboardone.js插件实现 写入剪切板 -- 安卓和ios安美适配（仅测试部分机型）

unipp 中的向 剪切板写入 内容的 api 不支持 h5页面，我们可以通过clipboardone.js 第三方插件来实现向 剪切板 写入内容

1. 下载包 npm npm install clipboard --save
2. 建立一个新的 js 文件 ，写入一下内容：

import Clipboard from 'clipboard';

export function handleClipboard(text, event, onSuccess, onError) {
  event = event || {};
  const clipboard = new Clipboard(event.target, {
    text: () => text,
  });
  // 这里是设置 成功/失败的回调 ，结合页面的代码可以生成对应的提示
  //   clipboard.on('success', () => {
  //     onSuccess();
  //     clipboard.off('error');
  //     clipboard.off('success');
  //     clipboard.destroy();
  //   });
  //   clipboard.on('error', () => {
  //     onError();
  //     clipboard.off('error');
  //     clipboard.off('success');
  //     clipboard.destroy();
  //   });
  clipboard.onClick(event);
}

3. 在组件中引入文件:
   import { handleClipboard } from './clipboardone.js';

4. 在标签中设置 一个事件， 并将 需要写入 剪切板 的内容 传进去：
   
   贴上我的代码：<view class="btn" @click.stop="btnclick(codetext, isPause)"> 免费领取</view>

5. 设置事件， 在其中实现 写入功能：

 btnclick(data) {
 handleClipboard( // 这是 实现向剪切板 写入内容的代码， data 就是传入的要写入剪切板的内容
        // 写入剪切板
        data,  
        event,
        // () => {
        //   uni.showToast({
        //     title: '资源地址已复制成功',
        //   });
        // },
        // () => {
        //   uni.showToast({
        //     title: '复制失败',
        //   });
        // }
      );
}

以上就可以实现 向 剪切板 写入功能。 在测试的 ios 和 安卓手机中没问题。