CopyText 长按复制

概述

CopyText 长按复制，用于复制关键文本信息，可扩展其他功能按钮。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiCopyText from "@/components/firstui/fui-copy-text/fui-copy-text.vue"
export default {
	components:{
		fuiCopyText
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 text 属性设置显示文本，value 属性设置需要复制的内容，若value为空则默认复制 text 内容。

<fui-copy-text text="长按文本复制" value="firstui.cn"></fui-copy-text>

设置扩展按钮

通过 text 属性设置显示文本，value 属性设置需要复制的内容，color 属性设置显示文本颜色，size 属性设置显示文本字体大小，buttons 属性设置扩展按钮。

<fui-copy-text text="长按文本复制" value="https://doc.firstui.cn" color="#FFB703" size="30" :buttons="['回复','评论']" @click="btnClick"></fui-copy-text>

methods: {
	btnClick(e) {
		console.log(e)
		this.fui.toast(`您点击了【${e.text}】按钮`)
	}
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
text	String	显示文本	-	-
value	String	需要复制的文本，为空则复制text内容	-	-
size	Number, String	显示文本字体大小	28	-
fontWeight	Number, String	显示文本字重	400	-
color	String	显示文本字体颜色	#181818	-
background	String	显示文本选中时背景色	transparent	-
showBtn	Boolean	是否显示复制按钮。为false时，长按直接复制（无扩展按钮时生效）	true	-
direction	String	操作按钮显示方向，可选值：top，left，right，bottom	top	-
zIndex	Number, String	操作按钮层级z-index值	1001	Nvue端无效，默认越靠后的元素层级越高
removeCopy	Boolean	是否移除复制按钮（有扩展按钮时生效）	false	-
buttons	Array	扩展按钮，字符串数组，如 ['回复','评论']	[ ]	-

Events

事件名	说明	回调参数
@click	点击扩展按钮时触发	{   index:按钮索引   text:按钮文本 }
@copy	点击复制按钮时触发	{   text:显示文本   value:要复制的文本 }

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)