复制按钮组件 - CopyText

引入组件

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { CopyText } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  enhanceApp: ({ app }) => {
    app.component('Copy', CopyText) 
  } 
}

使用示例

输入

CopyText.vue

<Copy label="显示的文本" text="hello world" />
<Copy type="auto" text="无图标" noIcon />
<Copy type="info" text="加粗文本" bold />
<Copy type="tip" text="复制这段文字" toolTip="Copied" toolTipPos="bottom" />
<Copy type="warning" text="更换图标" icon="material-symbols:content-copy" />
<Copy type="danger" text="使用图片" image="https://i.theojs.cn/logo/Lumen-Logo-mini.webp" />

输出

数据接口说明

字段	类型	说明	是否必填
type	auto | info | tip | warning | danger	按钮颜色类型，默认值：auto	可选
label	string	按钮上显示的文本，未设置时默认显示 text	可选
text	string	要复制的文本内容	必填
toolTip	string	复制成功后显示的提示文本，默认值：已复制	可选
noIcon	boolean	是否不显示图标，默认值：false	可选
icon	IconType	按钮的图标，默认值：heroicons-solid:clipboard-copy 。详情查看 IconType	可选
image	ImageType	按钮的图片 。详情查看 ImageType	可选
toolTipPos	top | bottom | left | right	提示显示的位置，默认值：top	可选
bold	boolean	是否启用加粗样式，启用时文字加粗 font-weight: 600，默认值：false	可选

IconType

export type IconMode = string | { light: string; dark: string }

export type IconType =
  | string
  | { icon: string; color?: IconMode }
  | { light: string; dark: string; color?: IconMode }
  | { svg: IconMode }

ImageType

export type ImageType =
  | string
  | { src: string; crop?: boolean; [prop: string]: any }
  | { light: string; dark: string; crop?: boolean; [prop: string]: any }