Appearance
FCopy 复制组件
组件与命名规范:组件名主推
FCopy,别名导出FinCopy。
一键复制文本内容到剪贴板的组件。
基础用法
最简单的用法,通过 content 属性传入要复制的内容。
loading
自定义按钮文本
通过 config.text 自定义按钮显示的文本。
loading
动态内容
支持通过函数动态获取要复制的内容。
loading
自定义样式
可以通过 config 配置不同的按钮样式和尺寸。
loading
自定义提示信息
可以自定义复制成功和失败的提示信息。
loading
禁用状态
通过 disabled 属性禁用复制按钮。
loading
自定义图标
可以自定义按钮的图标。
loading
自定义插槽
使用插槽可以完全自定义复制触发器的样式。
loading
事件监听
监听复制成功或失败的事件。
loading
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 要复制的内容(优先级高于 config.content) | string | (() => string) | - |
| config | 复制配置 | FCopyConfig | {} |
FCopyConfig
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 按钮文本 | string | '复制' |
| content | 要复制的内容 | string | (() => string) | - |
| icon | 图标,设为 false 则不显示图标 | Component | false | DocumentCopy |
| link | 是否为链接按钮 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| successMessage | 复制成功提示,设为 false 则不显示 | string | false | '复制成功' |
| errorMessage | 复制失败提示,设为 false 则不显示 | string | false | '复制失败' |
| ...其他 | 其他 Element Plus Button 属性 | - | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| callback | 同link 配合使用 | () => void |
| success | 复制成功时触发 | () => void |
| error | 复制失败时触发 | (error: Error) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义触发器内容 |