【uni-app】uniapp实现复制内容到剪切板，实现ctrl+c功能（五）

JS Lover

已于 2024-04-15 10:29:52 修改

阅读量5.9k

点赞数 7

分类专栏： uni-app 前端文章标签： javascript

于 2021-05-24 14:58:58 首次发布

本文链接：https://blog.csdn.net/qq_43576866/article/details/117223699

版权

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

uni-app

13 篇文章 4 订阅

订阅专栏

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】或者来看我的个人网站
二维码

uniapp复制功能，话不多说直接上代码

uni.setClipboardData({
    data: e, // e是你要保存的内容
    success: function () {
		uni.showToast({
			title:'复制成功',
			icon:'none'
		})
    }
})

执行完成后，你使用ctrl+v就能得到你刚刚复制的内容啦~~

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JS Lover

关注关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uni-app—— uniapp 小程序开启分享-复制链接功能

qq_43201350的博客

07-17

644

uni-app—— uniapp 小程序开启分享-复制链接功能

unity中将文本复制到IOS剪贴板

01-17

在unity中，将文本复制到IOS剪贴板，可以使用原生的剪切板

参与评论您还未登录，请先登录后发表或查看评论

uniapp实现点击复制文字

hdhddjddj的博客

06-29

352

【代码】uniapp实现点击复制文字。

uniapp复制、粘贴

weixin_72329752的博客

10-23

615

将指定内容设置到系统剪贴板。获取到系统剪贴板中的内容。

uniapp uni.setClipboardData一键复制不起作用的问题解决

热门推荐

Shids_的博客

06-01

1万+

uniapp 开发必备：复制功能实现教程（h5）

uni-app：将数据复制到剪切板

weixin_46162592的博客

06-13

1749

uni-app：将数据复制到剪切板

uni-app 复制信息到剪切板

往事随风

02-19

2451

最近在用uni-app技术做二元项目，遇到一些问题进行整理，希望大家少踩一些坑在做个人中心的时候有一个需求是这样的，需要将用户ID复制到剪切板 在做复制的时候遇到两个问题：一个是复制H5不支持另一个是点击复制图标的时候，整个信息都跳转了，无法单独复制用户ID（原因是冒泡了，加上.stop阻止默认事件就ok了）以下是复制代码 1、安装 vue-clipboard2 插件 npm install vue-clipboard2 --save 2、安装完成后在man.js中引入 import VueCli

uniapp复制内容到剪贴板

每天都要努力学习哦~~

06-29

2593

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明， npm地址 github地址 3、main.js注册 4、使用

uniapp实现复制粘贴功能(uni.setClipboardData、uni.getClipboardData)

这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。

01-11

2828

uniapp复制功能，思路：使用uniapp的uni.setClipboardData（设置系统剪贴板的内容）和uni.getClipboardData（获取系统剪贴板内容）

点击文本实现复制、粘贴

01-02

TextView实现复制功能，代码简洁，给自己留个备份也供有需要的朋友参考

uni-app_base:uni-app uniapp项目初始化模板，集成常用功能和配置，持续完善中..

05-13

uni-app 初始模板简介使用方式创建的 uni-app 项目模板具有以下功能特性: 使用引入和UI 框架使用作为网络请求库。并完善了拦截器、全局请求 loading 控制等使用库让小程序和 APP 端支持 cookie 使用库让 vuex ...

uni-app uniApp蓝牙打印机安卓通用型

03-03

关于 uni-app 配合安卓通用型打印机的使用，主要涉及到如何在 uni-app 项目中集成安卓设备的打印功能。这通常需要通过调用安卓系统的打印服务API或者通过第三方库来实现。步骤大致如下：集成SDK：首先，如果...

基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

10-16

【基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能】在现代互联网技术的推动下，直播已经成为了一种重要的社交和娱乐方式。本文将深入探讨如何使用vue和uni-app框架来构建一个类似抖音和陌陌的直播应用...

uni-app实现select标签功能

04-27

在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除

基于uni-app框架的登录模板

02-21

uni-app是由ECharts团队开发的，它允许开发者用一套代码编写应用，然后发布到iOS、Android、H5、微信小程序、支付宝小程序等多个平台。这个模板为开发者提供了标准化的登录页面设计和交互逻辑，大大减少了开发时间。...

uniapp复制到剪贴板

飞上云端看彩虹

10-12

1338

安装 npm install --save vue-clipboard2 在main.js中引入 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) “优课GO”中使用到的业务场景代码如下： <view class="flex align-center text-light-grey font-small font-weight-abit-bold" > 兑换码：<span class="tex

vue，uniapp 复制剪贴板

weixin_43453621的博客

08-15

2626

uniapp 复制剪贴板。

uniapp复制富文本内容

06-07

要复制富文本内容，可以使用uni-app的自带组件`rich-text`和`textarea`来实现。首先将富文本内容渲染到`rich-text`组件中，然后在`textarea`组件中绑定一个变量，将`rich-text`组件的内容赋值给该变量。最后，添加一个按钮，通过调用`uni.setClipboardData`方法将`textarea`组件中的内容复制到剪贴板中即可。以下是示例代码： ```html <template> <view> <rich-text :nodes="richText"></rich-text> <textarea v-model="copyContent"></textarea> <button @tap="copyText">复制文本</button> </view> </template> <script> export default { data() { return { richText: '<div>富文本内容</div>', copyContent: '' } }, methods: { copyText() { uni.setClipboardData({ data: this.copyContent, success: function() { uni.showToast({ title: '复制成功' }) } }) } } } </script> ``` 注意，要使用`rich-text`组件渲染富文本内容，需要将富文本内容转化为`nodes`数组格式。可以使用第三方库如`htmlparser2`来实现富文本内容的转换。