uniapp复制功能的两种实现方式

您所在的位置：网站首页 › 如何消除小程序使用记录功能 › uniapp复制功能的两种实现方式

uniapp复制功能的两种实现方式

2024-07-17 05:31| 来源: 网络整理| 查看: 265

在uinapp项目应用如下：

第一种形式，适用h5移动端的复制方式安装vue-clipboard npm install --save vue-clipboard2 或者 yarn add vue-clipboard2 --save

全局注册使用：main.js入口文件

import VueClipboard from "vue-clipboard2"; Vue.use(VueClipboard);

如果是已经在使用中的项目请卸载node_modules重新安装一下依赖，免得出现文件路径找不到的问题

安装依赖：npm i 或者 yarn install

以上步骤完成之后就可以在页面直接使用了，以下是clipboard.vue页面，这样使用

template部分 dataMessge是要复制的数据

复制

javascript部分

export default { methods: { //复制-h5 onCopy(e) { uni.showToast({ title: "复制成功", }); console.log("复制成功！"); }, onError（e）{ uni.showToast({ title: "复制失败", }); console.log("复制失败！"); } }, };

第二种方式使用uniapp提供的api 适用小程序开发 template部分 dataMessge是要复制的数据

复制

javascript部分

//复制 copyMessage(value) { uni.setClipboardData({ data: value, success: function (res) { uni.getClipboardData({ success: function (res) { uni.showToast({ title: "复制成功", }); }, }); }, }); },

【本文地址】

uniapp复制功能的两种实现方式

uniapp复制功能的两种实现方式

今日新闻

推荐新闻