# tui-copy-text 长按复制

介绍

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

注意

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiCopyText from "@/components/thorui/tui-copy-text/tui-copy-text"
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

none

# 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

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

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

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