tui-clipboard 复制到剪贴板 开源组件

介绍

复制到剪贴板，兼容H5，APP和小程序依然使用平台自带Api。

引入

注：将文件引入自己项目中，确保引入路径正确

//uni-app
import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'

//微信小程序，注：小程序仅开源至v1.4.2，开源版无此文件（仅会员版有）
import thorui from '../../../components/common/tui-clipboard/tui-clipboard.js'

代码演示

<template>
  <view class="container">
  	<view class="tui-btn-box">
  		<tui-button type="white" shape="circle" @click="clipboard">复制QQ群号：605135318</tui-button>
  	</view>
  </view>
</template>

// data 数据 及 方法
import thorui from "@/components/common/tui-clipboard/tui-clipboard.js"
export default {
  data() {
  	return {

  	}
  },
  methods: {
  	//event 当需要异步请求返回数据再进行复制时，需要传入此参数，或者异步方法转为同步方法（H5端）
  	clipboard: function(event) {
  		let data="605135318";
  		thorui.getClipboardData(data, (res) => {
  			// #ifdef H5 || MP-ALIPAY
  			if (res) {
  				//复制成功
  				console.log('复制成功')
  			} else {
  				//复制失败
  				console.log('复制失败')
  			}
  			// #endif
  		},event)
  	}
  }
}

.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}
.tui-btn-box {
	padding: 30rpx 40rpx;
	box-sizing: border-box;
}

<view class="container">
  <view class="tui-btn-box">
  	<tui-button type="white" shape="circle" bindclick="clipboard">复制QQ群号：605135318</tui-button>
  </view>
</view>

//注意引入路径正确
import thorui from '../../../components/common/tui-clipboard/tui-clipboard.js'
Page({
 clipboard: function (data) {
   thorui.getClipboardData("605135318",()=>{})
 }
})

.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}
.tui-btn-box {
	padding: 30rpx 40rpx;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

Methods

方法名	说明	传入参数
getClipboardData	复制文本	data：需要复制的文本 callback：回调函数，返回成功或者失败 event：仅H5端使用

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码