Skip to content

CopyText 长按复制 ​

长按文本可显示复制操作,也可配置额外的操作按钮。

支持平台 ​

以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。

App-vueApp-nvue微信小程序支付宝小程序百度小程序字节小程序QQ小程序H5PC快手小程序钉钉小程序
✓✓✓✓✓✓✓✓✓✓✓

基础用法 ​

vue
<!-- 长按显示复制操作 -->
<fui-copy-text text="需要复制的内容" />

属性 ​

属性类型说明官网默认值
textString显示文本-
valueString复制内容,为空时使用 text-
sizeNumber / String文字大小,单位 rpx28
fontWeightNumber / String文字字重400
colorString文字颜色#181818
backgroundString选中文本时的背景色transparent
showBtnBoolean是否显示复制按钮;无扩展按钮时为 false 可长按直接复制true
directionString操作按钮方向:top、left、right、bottomtop
zIndexNumber / String操作按钮层级,nvue 不支持1001
removeCopyBoolean有扩展按钮时是否移除复制按钮false
buttonsArray扩展按钮文本数组[]

事件 ​

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

本地源码返回的 value 是传入的 value 属性;即使未传 value 时实际复制了 text,回调中的 value 仍为空。

平台说明 ​

nvue 不支持 zIndex,组件前后顺序会影响层级。

插槽 ​

插槽说明
—官网未列出该组件的插槽