# tui-copy-text 长按复制会员组件

介绍

按钮，支持自定义颜色，支持表单提交。

注意

uni-app版本组件需要同时引入 tui-clipboard.js，文件目录确保和ThorUI保持一致。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiCopyText from "@/components/thorui/tui-copy-text/tui-copy-text.vue"
export default {
	components:{
		tuiCopyText
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-copy-text": "/components/thorui/tui-copy-text/tui-copy-text"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 value 属性设置需要展示的文本（默认复制该文本），color 属性设置文本颜色。

<tui-copy-text value="复制文本,上侧显示" color="#586c94"></tui-copy-text>

自定义复制内容

通过 copyValue 属性设置自定义复制的内容，如果不设置该属性值，默认复制 value 属性值。

<tui-copy-text value="自定义复制内容[ThorUI QQ群4：928308676]" copyValue="928308676" color="#586c94"></tui-copy-text>

扩展按钮

通过 buttons 属性设置扩展按钮。

<!--uni-app-->
<tui-copy-text value="复制以及扩展按钮 上侧" color="#586c94" :buttons="buttons"></tui-copy-text>

<!--微信小程序-->
<tui-copy-text value="复制以及扩展按钮 上侧" color="#586c94" buttons="{{buttons}}"></tui-copy-text>

//data数据
buttons: ['引用', '扩展']

# Slots

插槽名称	插槽说明
-	-

# Props

属性名	类型	说明	默认值
value	String	显示文本	copy text
copyValue	String	需要复制的文本，默认为空，取value值复制	-
size	Number	字体大小，单位rpx	28
bold	Boolean	是否加粗	false
color	String	字体颜色	#333
backgroundColor	String	选中后背景色	transparent
showCopyBtn	Boolean	是否显示复制tooltip，为false时，长按直接复制（无扩展buttons时生效）	true
direction	String	复制tooltip显示方向：top，left，right，bottom	top
zIndex	Number	复制tooltip z-index值	997
systemCopy	Boolean	使用系统长按操作，扩展按钮失效	false
removeCopy	Boolean	是否移除复制按钮(当只需要扩展按钮时使用且有扩展按钮时生效)	false
buttons	Array<String>	扩展按钮（1~3个左右）	[ ]

# Events

注：uni-app端绑定事件使用@前缀，如@copy；微信小程序原生使用bind前缀，如bindcopy

事件名	说明	回调参数
copy	复制成功时触发	{ value : value , copyValue : copyValue }
click	扩展按钮点击事件	{ index : 索引值 , value : value , copyValue : copyValue }