{"_id":"@composy/screenshot-vue","name":"@composy/screenshot-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/screenshot-vue","version":"0.0.1","description":"Vue components for @composy/screenshot-core","keywords":["screenshot","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins":{"types":"./es/plugins/index.d.ts","import":"./es/plugins/index.js","require":"./lib/plugins/index.cjs","default":"./es/plugins/index.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./types":{"types":"./es/types/index.d.ts","import":"./es/types/index.js","require":"./lib/types/index.cjs","default":"./es/types/index.js"},"./types/*":{"types":"./es/types/*.d.ts","import":"./es/types/*.js","require":"./lib/types/*.cjs","default":"./es/types/*.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","dev":"vite build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","test":"ltesting run:unit","test:coverage":"ltesting run:unit --coverage","test:watch":"ltesting run:unit --watch","test:run":"ltesting run:unit","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard","type-check":"vue-tsc --noEmit","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target vue"},"dependencies":{"@composy/screenshot-core":"^0.0.1","vue-demi":"^0.14.10"},"peerDependencies":{"vue":"^2.7.0 || ^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@vue/test-utils":"^2.4.11","eslint":"10.7.0","fast-check":"^4.9.0","jsdom":"29.1.1","typescript":"5.9.3","vite":"^8.1.4","vue":"3.5.39","vue-tsc":"^3.3.7"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/screenshot-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-rJg0oMFdPtSPfKu4OSqnWuWg3rFHpSmrwV00YQnKcODHBvb1X7P0J4Fts4g2mlCeUCt+jYcf+cbJmpY0nAhzow==","shasum":"5394433f1cc0e844ca288b548a891958a0591ec8","tarball":"https://registry.npmjs.org/@composy/screenshot-vue/-/screenshot-vue-0.0.1.tgz","fileCount":125,"unpackedSize":262778,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC+h0BxAySXcWonVRzvpSDVxHu5NJ/tTPMOM8wFGDUOAwIgCpysWMNLZZvGh44e6IVaPFcJCeJ2EduWtYCkbuRVXY8="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/screenshot-vue_0.0.1_1786949278413_0.23410497729809943"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:47:58.202Z","0.0.1":"2026-08-17T06:47:58.572Z","modified":"2026-08-17T06:47:59.419Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/screenshot-core","keywords":["screenshot","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/screenshot-vue\n\nVue 3 截图组件库，基于 `@composy/screenshot-core` 核心库封装。\n\n## 功能特性\n\n- 🧩 **Vue 3 组件** — 开箱即用的 `<Screenshot>` 组件\n- 🪝 **组合式函数** — `useScreenshot` composable\n- ⚡ **响应式** — Props 自动响应变化\n- 🔌 **插件支持** — 标准 Vue Plugin + Engine Plugin\n- 🎨 **设计令牌** — CSS 变量驱动样式\n- 📋 **剪贴板** — 组件内置复制到剪贴板功能\n\n## 安装\n\n```bash\nnpm install @composy/screenshot-vue\n```\n\n## 快速开始\n\n### 组件方式\n\n```vue\n<template>\n  <Screenshot\n    ref=\"screenshotRef\"\n    format=\"png\"\n    quality=\"0.9\"\n    @ready=\"onReady\"\n    @capture=\"onCapture\"\n    @error=\"onError\"\n  >\n    <template #toolbar=\"{ capture, selectRegion, download, copyToClipboard }\">\n      <button @click=\"capture\">截图</button>\n      <button @click=\"selectRegion\">框选</button>\n      <button @click=\"download\">下载</button>\n      <button @click=\"copyToClipboard\">复制</button>\n    </template>\n  </Screenshot>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { Screenshot } from '@composy/screenshot-vue'\n\nconst screenshotRef = ref(null)\n\nfunction onReady(instance) {\n  console.log('Screenshot ready', instance)\n}\n\nfunction onCapture(result) {\n  console.log('Captured', result.width, result.height)\n}\n\nfunction onError(error) {\n  console.error('Screenshot error', error)\n}\n</script>\n```\n\n### Composable 方式\n\n```vue\n<template>\n  <div ref=\"containerRef\">\n    <!-- 截图目标区域 -->\n  </div>\n  <button @click=\"capture\" :disabled=\"isCapturing\">截图</button>\n  <button @click=\"selectAndCapture\" :disabled=\"isCapturing\">框选</button>\n  <button @click=\"copyToClipboard\" :disabled=\"!lastResult\">复制</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { useScreenshot } from '@composy/screenshot-vue'\n\nconst containerRef = ref(null)\n\nconst {\n  capture,\n  selectAndCapture,\n  copyToClipboard,\n  isCapturing,\n  lastResult,\n  error,\n} = useScreenshot({\n  container: containerRef,\n  options: { format: 'png' },\n})\n</script>\n```\n\n### 插件方式\n\n```typescript\nimport { createApp } from 'vue'\nimport { ScreenshotPlugin } from '@composy/screenshot-vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(ScreenshotPlugin, {\n  defaultOptions: { format: 'png', quality: 0.9 },\n})\napp.mount('#app')\n```\n\n## API\n\n### Screenshot 组件 Props\n\n| Prop | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| containerClass | `string` | - | 容器额外 class |\n| containerStyle | `Record<string, string>` | - | 容器内联样式 |\n| debug | `boolean` | `false` | 调试模式 |\n| format | `'png' \\| 'jpeg' \\| 'webp'` | `'png'` | 导出格式 |\n| quality | `number` | `0.92` | 图片质量 |\n| scale | `number` | `devicePixelRatio` | 缩放比例 |\n| backgroundColor | `string` | - | 背景色 |\n| watermark | `WatermarkOptions` | - | 水印配置 |\n| disabled | `boolean` | `false` | 是否禁用 |\n\n### Screenshot 组件 Emits\n\n| 事件 | 参数 | 说明 |\n|------|------|------|\n| ready | `instance: ScreenCapture` | 实例创建完成 |\n| destroy | - | 实例销毁 |\n| error | `error: Error` | 截图出错 |\n| capture | `result: CaptureResult` | 截图完成 |\n\n### Screenshot 组件 Expose\n\n| 方法 | 说明 |\n|------|------|\n| `getInstance()` | 获取核心实例 |\n| `capture()` | 截图 |\n| `selectRegion(options?)` | 框选截图 |\n| `captureFullPage()` | 全页截图 |\n| `download(filename?)` | 下载 |\n| `copyToClipboard()` | 复制到剪贴板 |\n\n### useScreenshot\n\n```typescript\nconst {\n  instance,        // ShallowRef<ScreenCapture | null>\n  isCapturing,     // Ref<boolean>\n  lastResult,      // Ref<CaptureResult | null>\n  error,           // Ref<Error | null>\n  capture,         // (target?) => Promise<CaptureResult | undefined>\n  captureRegion,   // (rect) => Promise<CaptureResult | undefined>\n  selectAndCapture,// (options?) => Promise<CaptureResult | undefined>\n  captureFullPage, // () => Promise<CaptureResult | undefined>\n  download,        // (filename?, format?, quality?) => Promise<void>\n  copyToClipboard, // (format?, quality?) => Promise<boolean>\n  destroy,         // () => void\n} = useScreenshot({ container, options })\n```\n\n### ScreenshotPlugin\n\n```typescript\napp.use(ScreenshotPlugin, {\n  defaultOptions: Partial<ScreenshotOptions>,\n  componentName: string | false,  // 全局组件名，默认 'Screenshot'\n})\n```\n\n注册后可通过 `this.$screenshot.create(options)` 或 `this.$screenshot.capture(container)` 使用。\n\n## CSS 类名\n\n组件使用 `ldesign-` 前缀的 BEM 类名：\n\n| 类名 | 说明 |\n|------|------|\n| `ldesign-screenshot` | 根元素 |\n| `ldesign-screenshot--loading` | 截图中状态 |\n| `ldesign-screenshot--disabled` | 禁用状态 |\n| `ldesign-screenshot__overlay` | 区域选择遮罩 |\n| `ldesign-screenshot__selection` | 选区框 |\n| `ldesign-screenshot__label` | 尺寸标签 |\n| `ldesign-screenshot--crosshair` | 十字光标 |\n\n## 依赖\n\n- `@composy/screenshot-core` — 核心引擎\n- `vue` ^2.7.0 || ^3.5.32 (peerDependency)\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-6cf83434053d1847bfae7a04fa9cd835"}