uniapp 复制功能

H5

第一步：安装 npm i clipboard --save

import Clipboard from 'clipboard'
 
export function handle (text, event, onSuccess, onError) {
  event = event || {}
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    onSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    onError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

第三步：在需要使用的页面使用

<view class="btn2" @click="copy('复制的内容')">复制</view>
import {handle} from '../../util/clipboard.js' 
copy(data) {
     // #ifdef H5
	handle(data, event, () => {
				        uni.showToast({
				        	icon: 'none',
				        	title: '成功'
				        })
				      }, () => {
				        uni.showToast({
				        	icon: 'none',
				        	title: '失败'
				        })
				      })
    // #endif
}

小程序 <view @tap='copy("123")'>111

	copy(value){
		  //提示模板
		  uni.showModal({
		    content:value,//模板中提示的内容
		    confirmText:'复制内容',
		    success:()=>{//点击复制内容的后调函数
		      //uni.setClipboardData方法就是讲内容复制到粘贴板
		      uni.setClipboardData({
		        data:value,//要被复制的内容
		        success:()=>{//复制成功的回调函数
		          uni.showToast({//提示
		            title:'复制成功'
		          })
		        }
		      });
		    }
		  });
		},