@composy/clipboard-vue

@composy/clipboard-vue

@composy/clipboard-core 的 Vue 适配包，提供组件、Composable、指令和插件。

功能

• <Clipboard>：容器级 copy/paste 监听、作用域 slot 方法、状态和可访问反馈。
• useClipboard()：响应式复制、读取、状态、历史和错误状态。
• v-clipboard：文本、HTML、富文本、JSON、URL 复制，支持 .cut。
• ClipboardVuePlugin：注册全局组件、指令、provide/inject 和 $clipboard。
• createClipboardEnginePlugin()：接入 Engine 插件上下文。

安装

pnpm add @composy/clipboard-core @composy/clipboard-vue

样式：

import '@composy/clipboard-vue/index.css'

使用前加载 LDesign styles/color.css 与 styles/size.css，组件样式桥接 --ld-* token。

组件

<script setup lang="ts">
import { Clipboard } from '@composy/clipboard-vue'
</script>

<template>
  <Clipboard value="Hello LDesign" copy-on-click>
    <button class="ldesign-clipboard__trigger">Copy</button>
  </Clipboard>
</template>

slot 提供 copy、copyText、copyHtml、copyJson、copyUrl、copyCustom、copyRichText、copyImage、read、readText、readHtml、readImage、status 和 feedback。组件也会通过 expose 暴露这些复制/读取方法、clear 和 status。

组件默认创建并销毁自己的管理器。传入 manager prop 时会借用外部实例，不会销毁它；应用安装 ClipboardVuePlugin 后，未显式传入的组件会复用注入的管理器。

Composable

import { ref } from 'vue'
import { useClipboard } from '@composy/clipboard-vue'

const container = ref<HTMLElement | null>(null)
const { copyText, copyJson, read, status, history, lastError, capabilities } = useClipboard({ container })

await copyText('Hello')
await copyJson({ ok: true }, 2)
const data = await read()
console.log(capabilities.value.readText, capabilities.value.domFallback)

useClipboard({ manager }) 可以借用外部管理器；借用实例由调用方负责销毁。未传入 manager 时，Composable 会在卸载时销毁自己创建的实例。 Composable 还返回 capabilities，它会在 manager 初始化时同步能力快照；isSupported 是该快照中任一读/写 API 或允许的 DOM fallback 可用时的便捷布尔值。

指令

<button v-clipboard="'Hello'">Copy text</button>
<button v-clipboard:html="'<b>Hello</b>'">Copy HTML</button>
<button v-clipboard:json="{ ok: true }">Copy JSON</button>
<button v-clipboard:url="'https://ldesign.dev'">Copy URL</button>

成功触发 clipboard-success，失败触发 clipboard-error。

插件

import { createApp } from 'vue'
import { ClipboardVuePlugin } from '@composy/clipboard-vue'

createApp(App).use(ClipboardVuePlugin, {
  componentName: 'LClipboard',
  directiveName: 'clipboard',
})

插件创建的管理器会在 Vue 应用卸载时销毁；通过 manager 选项借用的实例由调用方负责销毁。

构建

@composy/builder / Rolldown、ESLint 和 TypeScript 权威配置位于本包 .ldesign/，包根旧 ESLint/TypeScript 路径保留兼容 shim。根工作区 pnpm run build 会先构建 Core，再构建 Vue，并检查两包发布产物。

pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run build

构建会生成 dist、es、esm 和 lib 产物。

License

MIT