{"_id":"@composy/qrcode-vue","name":"@composy/qrcode-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/qrcode-vue","version":"0.0.1","description":"Vue 3 组件和组合式函数，用于二维码生成","type":"module","exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs"}},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","sideEffects":["**/*.css"],"scripts":{"build":"ldesign-builder build && node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd ../.. --target vue","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc --noEmit -p tsconfig.typecheck.json","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/qrcode-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","eslint":"10.7.0","typescript":"5.9.3","vue":"3.5.39"},"browser":"./dist/index.js","_id":"@composy/qrcode-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-i+gCmB99S1lp4DpjU6aPwpRJldzb1bnhX7g5F7eCDrhMpLS09e/pg+60PSJ9++3TD0ByN+GO7EP33yFWiucKaQ==","shasum":"fd46640bff5fbd00d0f7f59d5af84bcc7d24e048","tarball":"https://registry.npmjs.org/@composy/qrcode-vue/-/qrcode-vue-0.0.1.tgz","fileCount":66,"unpackedSize":727812,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHOhEJFc6dymX7PkNEezmaSXfSgA62/yJ/fFlyVoF9WzAiA2tDgtlsyr/1c5C0H4gAXkx0d1z56s0nMxyGsU2MEK/w=="}]},"_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/qrcode-vue_0.0.1_1786949258566_0.9726417225784334"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:47:38.348Z","0.0.1":"2026-08-17T06:47:38.718Z","modified":"2026-08-17T06:47:39.734Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 组件和组合式函数，用于二维码生成","readme":"# @composy/qrcode-vue\n\n二维码 Vue 3 组件、组合式函数与指令，基于 `@composy/qrcode-core`。\n\n## 安装\n\n```bash\npnpm add @composy/qrcode-vue @composy/qrcode-core vue\n```\n\n## 快速使用\n\n```vue\n<template>\n  <LDesignQRCode content=\"https://example.com\" :size=\"300\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { LDesignQRCode } from '@composy/qrcode-vue'\n</script>\n```\n\n## `<LDesignQRCode>` 组件\n\n### Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `content` | `string` | - | 二维码内容（必填） |\n| `renderType` | `'canvas' \\| 'svg' \\| 'webgl'` | `'canvas'` | 渲染类型 |\n| `size` | `number` | `200` | 尺寸(px) |\n| `margin` | `number` | `4` | 边距(模块数) |\n| `fgColor` | `string` | `'#000000'` | 前景色 |\n| `bgColor` | `string` | `'#ffffff'` | 背景色 |\n| `dotStyle` | `DotStyle` | `'square'` | 模块样式 |\n| `errorCorrectionLevel` | `ErrorCorrectionLevel` | `'M'` | 纠错级别 |\n| `gradient` | `GradientConfig` | - | 渐变配置 |\n| `logo` | `LogoConfig` | - | Logo 配置 |\n| `animated` | `boolean` | `false` | 启用动画 |\n| `animationType` | `'fade' \\| 'scale' \\| 'rotate' \\| 'slide'` | `'fade'` | 动画类型 |\n| `invert` | `boolean` | `false` | 反转颜色 |\n| `rotate` | `0 \\| 90 \\| 180 \\| 270` | `0` | 旋转角度 |\n| `class` | `string \\| object \\| array` | `''` | 自定义 class |\n| `containerStyle` | `Record<string, unknown>` | `{}` | 自定义样式 |\n\n### Events\n\n| 事件 | 参数 | 说明 |\n|------|------|------|\n| `ready` | `QRCodeInstance` | 生成完成 |\n| `error` | `Error` | 生成失败 |\n| `click` | `MouseEvent` | 点击事件 |\n| `download` | `{ fileName, format }` | 下载完成 |\n| `hover` | `boolean` | 悬停状态 |\n\n### Slots\n\n| 插槽 | 说明 |\n|------|------|\n| `loading` | 加载中 |\n| `error` | 错误状态 |\n| `overlay` | 覆盖层 |\n\n### Methods (via template ref)\n\n| 方法 | 说明 |\n|------|------|\n| `getInstance()` | 获取 QRCode 实例 |\n| `toDataURL(format?, quality?)` | 导出 Data URL |\n| `toSVGString()` | 导出 SVG 字符串 |\n| `download(fileName?, format?, quality?)` | 下载 |\n| `refresh()` | 重新生成 |\n\n## `useQRCode` Composable\n\n```ts\nimport { useQRCode } from '@composy/qrcode-vue'\n\nconst { container, qrInstance, isReady, error, generate, refresh, download } = useQRCode(\n  { content: 'https://example.com', renderType: 'canvas' },\n  { immediate: true, animated: true }\n)\n```\n\n## `v-qrcode` 指令\n\n```vue\n<template>\n  <div v-qrcode=\"'https://example.com'\" />\n  <div v-qrcode.svg.large=\"'https://example.com'\" />\n  <div v-qrcode.auto.dark.download=\"config\" />\n</template>\n```\n\n## 插件安装\n\n```ts\nimport { createApp } from 'vue'\nimport { QRCodeVuePlugin } from '@composy/qrcode-vue'\n\nconst app = createApp(App)\napp.use(QRCodeVuePlugin, { componentName: 'LDesignQRCode' })\napp.mount('#app')\n```\n\n## CSS 变量\n\n组件样式通过 `--ldesign-qrcode-*` CSS 变量桥接 LDesign token，消费方需先加载全局 color/size CSS variables。\n\n## 构建产物\n\n| 目录 | 格式 | 入口 |\n|------|------|------|\n| `dist` | UMD | `dist/index.js`、`dist/index.min.js` |\n| `es` | ESM | `es/index.js` |\n| `esm` | ESM | `esm/index.js` |\n| `lib` | CJS | `lib/index.cjs` |\n\n## 开发\n\n```bash\npnpm run type-check\npnpm run build\npnpm run test:run\n```\n","readmeFilename":"README.md","_rev":"1-802b2408b8b777af1eb53dda6151a3a9"}