uniapp H5实现点击复制

最新推荐文章于 2025-06-25 10:54:20 发布

小居米

最新推荐文章于 2025-06-25 10:54:20 发布

阅读量2.5k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： uniApp JavaScript 文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/xiaojuju0/article/details/110425802

uniApp 同时被 2 个专栏收录

14 篇文章

订阅专栏

JavaScript

11 篇文章

订阅专栏

博客指出uniapp的H5版没有复制功能接口，引用插件clipboard安装麻烦，原生js选择困难。分享了一个能在uniapp H5中使用的复制功能实现方法，简单不复杂，亲测可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp的H5版是没有复制功能的接口的，可以实现H5版的复制功能有1.引用插件：clipboard 然后使用npm install clipboard --save安装还是麻烦 2.五花八门的原生js，都不知道用哪个好，看着也是头疼。下面给大家分享一个能在uniapp H5中使用的方法，简单不复杂，复制就能用，亲测有用。哈哈哈

代码如下：

<view class="boxd-item" @click="copyLink(detail.link)">分享链接</view>

//将要复制的内容传进去
copyLink(val){
	this.copy(val); //调用copy方法;
},
copy(data) {
    let url = data;
    let oInput = document.createElement('input');
    oInput.value = url;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象;
    document.execCommand("Copy"); // 执行浏览器复制命令
    // 复制成功提示;
	uni.showToast({
		title: '复制成功',
		icon: 'none',
		duration: 2000
	});
    oInput.remove()
},