# @chargebee/chargebee-js-vue-wrapper 中文文档
规范地址：https://npmcn.com/package/%40chargebee/chargebee-js-vue-wrapper/
版本：0\.3\.3
npm 元数据更新时间：2025-12-10T06:09:24.547Z
中文译文更新时间：2026-11-09T10:44:23.780Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40chargebee/chargebee-js-vue-wrapper
原文对照：https://npmcn.com/package/%40chargebee/chargebee-js-vue-wrapper/?lang=original
项目主页：https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-vue#readme
源码仓库：https://github.com/chargebee/chargebee-js-wrappers
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：32.8 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：vue ^3\.3\.4
- 首次发布：2019-04-28T13:45:03.638Z
- 最新版本发布：2025-10-09T10:50:55.045Z
- 近 30 天下载量：42108（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 0 个）
## 中文简介
Vue Clapper for Courgebee.js 组件
## 安装
```sh
npm install @chargebee/chargebee-js-vue-wrapper
```
也可以使用：`pnpm add @chargebee/chargebee-js-vue-wrapper`、`yarn add @chargebee/chargebee-js-vue-wrapper`、`bun add @chargebee/chargebee-js-vue-wrapper`
## README
# 排气管 JS Vue Wrapper
充电器组件的 Vue 包装器
## 实例
详细例子: [点击这里](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/vue/cb-components-examples#readme)
## 现场直播
查看实况演示 [这里](https://www.recur.in/components-examples/vue/#/example1)
## 安装
从 npm 安装 :
```bash
npm install @chargebee/chargebee-js-vue-wrapper
```
## 使用量
充电蜂组件需要您以 `site` 财务报告和审定财务报表 `publishableKey`
> 想知道在哪里获得您的 API 密钥吗 ? [参考这里](https://www.chargebee.com/docs/api_keys.html)
在你身边 `index.html`数字 :
```html
...
```
### 基本用途
在您的 vue 组件
```js
```
### 一个更为复杂的例子是:
> 注意: 如果 vue 版本为 3.2 或 更小, 请在您的 Vue 应用程序靴子上添加以下一行 `app.config.unwrapInjectedRef = true` [参考文件](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity)
```js
```
### 3DS 授权
在您的 vue 组件
```js
```
## 组件和API
#### 卡片组件[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)(中文(简体) )
| 道具 | 说明 | 数据类型 |
| --- | --- | --- |
| `class` | 容器元素的 CSS 类别名称 | 字符串 |
| `fonts` | 字体面或链接的阵列 | [字体](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `classes` | 用于替换各种 CSS 类名的集 [事件](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [类](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `locale` | 语言代码 | [语言](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `styles` | 样式定制集 | [样式](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `placeholder` | 卡片字段的一组占位符 | [占位符](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `ref` | 用于卡片组件的 Vue 引用( ref) | [Vue 参考](https://vuejs.org/v2/api/#vm-refs) |
##### 活动[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)(中文(简体) )
| 道具 | 说明 | 参数 |
| --- | --- | --- |
| `@ready` | 组件挂起并准备好时触发器 | [外地](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `@change` | 每个州变化的触发器 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `@focus` | 当组件被聚焦时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `@blur` | 组件模糊时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
#### 外地构成部分([文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)(中文(简体) )
- 卡片号码
- 纸质打印
- 纸牌CVV
| 道具 | 说明 | 数据类型 |
| --- | --- | --- |
| `class` | 容器元素的 CSS 类名 | 字符串 |
| `styles` | 二元字段样式 | [样式](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) |
| `placeholder` | 字段的占位符 | 字符串 |
##### 活动支持( E)[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)(中文(简体) )
| 道具 | 说明 | 参数 |
| --- | --- | --- |
| `@ready` | 组件挂起并准备好时触发器 | [外地](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `@change` | 每个州变化的触发器 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `@focus` | 当组件被聚焦时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `@blur` | 组件模糊时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
## 参考:
[充气管组件-联署文件](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration)
## 支助
是否有人询问执行情况? 联系 [支持@ forcebee.com](mailto:support@chargebee.com)
## 常见问题
### @chargebee/chargebee-js-vue-wrapper 是什么？
Vue Clapper for Courgebee\.js 组件
### 如何安装 @chargebee/chargebee-js-vue-wrapper？
在项目目录运行 npm install @chargebee/chargebee-js-vue-wrapper，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.3\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @chargebee/chargebee-js-vue-wrapper 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/chargebee\_\_chargebee-js-vue-wrapper 是否存在。
### @chargebee/chargebee-js-vue-wrapper 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @chargebee/chargebee-js-vue-wrapper 可以商用吗？
@chargebee/chargebee-js-vue-wrapper 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @chargebee/chargebee-js-vue-wrapper 的下载量有多少？
根据 npm 官方下载统计，@chargebee/chargebee-js-vue-wrapper 在 2026/10/10 – 2026/11/08 这 30 天内被下载 42,108 次，日均约 1,404 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @chargebee/chargebee-js-vue-wrapper 还在维护吗？
最新版本 0\.3\.3 发布于 2025/10/09（1\.1 年前）；至今共发布 16 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。