uniapp复制文本详解

时间:2021年06月16日

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


uni.setClipboardData的使用


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


360截图20210616093823370.jpg


<view class="input-title" @click="copyText('修改价格')">修改价格</view>
copyText(value){
				
		uni.setClipboardData({
		    data:value,//要被复制的内容
			success:()=>{//复制成功的回调函数
			    uni.showToast({//提示
				    title:"复制成功"
				    })
				  }
				});
		 }		


uni.setClipboardData的缺点


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


兼容全平台的复制插件


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


360截图20210616095720937.jpg


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


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


copyText(value){

	setClipboardData(value)
	
	}


360截图20210616092834323.jpg


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


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



来源:君兰IT(QQ/微信:644828230),转载请注明出处!


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



最新文章
热点文章