unipp 中的向 剪切板寫入 內容的 api 不支持 h5頁面，我們可以通過clipboardone.js 第三方插件來實現向 剪切板 寫入內容

下載包 npm npm install clipboard --save

建立一個新的 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); }

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

在標簽中設置 一個事件， 并將 需要寫入 剪切板 的內容 傳進去：

貼上我的代碼：<view class="btn" @click.stop="btnclick(codetext, isPause)"> 免費領取</view>

設置事件， 在其中實現 寫入功能：

btnclick(data) {handleClipboard( // 這是 實現向剪切板 寫入內容的代碼， data 就是傳入的要寫入剪切板的內容// 寫入剪切板data, event,// () => {// uni.showToast({// title: '資源地址已復制成功',// });// },// () => {// uni.showToast({// title: '復制失敗',// });// }); }

以上就可以實現 向 剪切板 寫入功能。 在測試的 ios 和 安卓手機中沒問題。

總結

以上是生活随笔為你收集整理的uniapp h5页面 在移动端 使用clipboardone.js插件实现 写入剪切板 -- 安卓和ios安美适配（仅测试部分机型）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。