uniapp复制文本详解

时间：2021年06月16日

uniapp中的文本，是不能直接复制的，怎样复制呢？下面将通过一些例子来讲解一下。

uni.setClipboardData的使用

下面代码是要复制“修改价格”到剪切板上，点击修改价格将会触发copyText函数，从而实现复制，这里使用了uniapp内置函数uni.setClipboardData

$\"360截图20210616093823370.jpg\"/$

<view class="input-title" @click="copyText('修改价格')">修改价格</view>

copyText(value){\n				\n		uni.setClipboardData({\n		    data:value,//要被复制的内容\n			success:()=>{//复制成功的回调函数\n			    uni.showToast({//提示\n				    title:"复制成功"\n				    })\n				  }\n				});\n		 }

uni.setClipboardData的缺点

uni.setClipboardData优点就是使用方便简捷，但是它只能在app和小程序使用，无法在h5中使用。如何兼容h5呢？

兼容全平台的复制插件

到uniapp官方的插件市场中搜索“剪贴板”，然后使用HBuilderX导入插件到项目中，如图所示

$\"360截图20210616095720937.jpg\"/$

在需要使用的页面中加载，模板代码同上面

import { setClipboardData, getClipboardData } from '@/uni_modules/u-clipboard/js_sdk'

copyText(value){\n\n	setClipboardData(value)\n	\n	}

$\"360截图20210616092834323.jpg\"/$

点击修改价格，同样可以复制。这个插件可以兼容app、h5以及小程序全平台。

小结：移动端应用在app和小程序中可以使用uni.setClipboardData函数，在h5中需要使用“剪切板”插件

来源：君兰IT（QQ/微信：644828230），转载请注明出处！

本文地址：https://www.junlan365.com/show/id/60.html