# @cardknox/vue-cardknox-ifields 中文文档

规范地址：https://npmcn.com/package/%40cardknox/vue-cardknox-ifields/

版本：2\.2\.86
npm 元数据更新时间：2026-03-16T18:08:08.533Z
中文译文更新时间：2026-11-09T15:07:51.601Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cardknox/vue-cardknox-ifields
原文对照：https://npmcn.com/package/%40cardknox/vue-cardknox-ifields/?lang=original
项目主页：https://github.com/Cardknox/vue-cardknox-ifields#readme
源码仓库：https://github.com/Cardknox/vue-cardknox-ifields

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：85.8 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2020-05-06T16:12:34.842Z
- 最新版本发布：2026-03-16T18:08:08.372Z
- 近 30 天下载量：2416（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 1 个）

## 中文简介

Cardknox i 字段的 Vue 组件

## 安装

```sh
npm install @cardknox/vue-cardknox-ifields
```

也可以使用：`pnpm add @cardknox/vue-cardknox-ifields`、`yarn add @cardknox/vue-cardknox-ifields`、`bun add @cardknox/vue-cardknox-ifields`

## README

# (原始内容存档于2016-10-12). vue-cardknox-ifields

## 用于 Cardknox i 字段的 Vue 3 组件

## 卡克诺克

Cardknox是开发商方便的支付网关集成供应商,用于存储、在线或移动交易

**沙盒 :** [https://www.cardknox.com/sandbox/ 页面存档备份,存于互联网档案馆](https://www.cardknox.com/sandbox/)

**i 字段:** [https://www.cardknox.com/ifields/ 页面存档备份,存于互联网档案馆](https://www.cardknox.com/ifields/)

使用此组件需要沙盒或活账户

* * *

_此组件使用Vue 3. Vue 2 , 使用版本 **[1.2.54 (中文(简体) )](https://www.npmjs.com/package/@cardknox/vue-cardknox-ifields/v/1.2.54)**_

## 使用量

需要2个基本道具来进行这个操作.

#### 1\. 类型

I Fields支持三种付款数据:

-   信用卡
-   简历
-   阿彻

```
    template: '<ifields :type="card" />
```

该财产的可能价值是:

-   纸牌
-   简历
-   ach (单位:千美元)

可从组件中导入

```
import { CARD_TYPE, CVV_TYPE, ACH_TYPE } from 'vue-cardknox-ifields';
```

#### 2\. 账户

递给你 [i 字段密钥](https://www.cardknox.com/ifields/) 改为 **账户** 这样的道具 :

```
Vue.component('app', {
    data: function () {
        return {
            account: {
                xKey: '{Your iFields key}',
                xSoftwareName: '{The name of your app}',
                xSoftwareVersion: '{Your app's version}'
            }
        };
    }
    template: '<ifields :account="account" />'
});
```

* * *

## 活动

有2个生命周期事件和7个用户事件.

* * *

### 生命周期事件

#### 1\. 装入

Iframe 已装入时释放

```
    template: '<ifields v-on:load="onLoad" />
```

#### 2\. 托肯语

当从 i 字段收到一个符号时会释放

```
    template: '<ifields v-on:token="onTokenReceived" />
```

* * *

### 用户事件

用户事件是指用户与其互动时从iFields传递的事件.

现有活动是:

1.  单击
2.  dbl 点击
3.  焦点
4.  模糊
5.  投入
6.  变动
7.  密钥压
8.  来文 \*

\* 提交活动的作用略有不同,见下文.

#### 更新事件

除了提交之外,上述事件还可以在单个活动中收集 `update`这是 **没有** 建议,因为这将导致不必要的函数调用。 而不是只订阅您想要执行的事件.

活动 有效载数 进入 `e.data`。数据还包含该事件,以便您可以订阅多个具有单一函数和 `switch` 这样的声明:

```
Vue.component('app', {
    methods: {
        onUpdate({ data }) {
            switch (data.event) {
                case 'input':
                    console.log("input event received");
                    break;
                case 'click':
                    console.log("click event received");
                    break;
            }
        }
    },
    template: '<ifields @click="onUpdate" @input="onUpdate" />'
});
```

#### 提交事件

当用户从 iFrame 内部提交窗体时,此事件会被触发 .

此事件与其他用户事件不同.

-   仅在 proc 情况下此事件才会被释放 `options.autoSubmit` 这是真的。 (此为缺省
-   订阅为 `@update` 将不象上述那样工作.
-   随这一事件而来的数据略有不同(见下文).

```
Vue.component('app', {
    methods: {
        onSubmit() {
            document.getElementById('form').dispatchEvent(
                new Event("submit", {
                    bubbles: true,
                    cancelable: true
                })
            );
        }
    },
    data: function () {
        return {
            options: {
                autoSubmit: true
            }
        };
    }
    template: `<form id="form">
                    <ifields :options="options" @submit="onSubmit" />
                </form>`
});
```

也可以让组件自动为您提交表格 _提交_ 从 iFrame 被触发。 若为 `autoSubmitFormId` 设置在组件调用的选项上。 这对于依赖窗体元素处理提交文件的较小的应用程序有用.

```
Vue.component('app', {
    data: function () {
        return {
            options: {
                autoSubmit: true,
                autoSubmitFormId: 'form'
            }
        };
    },
    template: `<form id="form">
                    <ifields :options="options" />
                </form>`
});
```

### 错误

还有一个错误事件可以订阅.

* * *

## 行动

关于这一构成部分,还有3个行动

### 焦点

`focusIfield`

此动作会在调用时将焦点设定为 ifield

### 清除

`clearIfield`

此动作将在调用时清除 ifield 的数据

### 获取托肯

`getToken`

此动作会在调用时为 ifield 装入符号 .

```
  
Vue.component('app', {
    methods: function () {
        return {
            focus(){
                this.$refs.ifieldRef.focusIfield();
            },
            clear(){
                this.$refs.ifieldRef.clearIfield();
            }
            getToken(){
                this.$refs.ifieldRef.getToken();
            }
        };
    },
    template: `<ifields ref="ifieldRef" />
});
```

## 道具

| 名称 | 类型 | 说明 | 有效数值 |
| --- | --- | --- | --- |
| 类型 | 字符串 | i 字段类型 | 
-   纸牌
-   简历
-   ach (单位:千美元)

 |
| 账户 | 账户 |  |  |
| 选项 | 选项 |  |  |
| 三维 | [三维](https://npmcn.com/package/%40cardknox/vue-cardknox-ifields/#readme-threeds) |  |  |
| 发行者 | 字符串 | 发卡人 | 仅用于 cvv i 字段 |

### 账户

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| x 键 | 字符串 | i 字段密钥 |
| x软件Name | 字符串 | 软件名称 |
| x软件版本 | 字符串 | 软件版 |

### 选项

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 启用日志 | 布尔 | 打开和关闭控制台的 i 字段日志 |
| 自动格式 | 布尔 | 打开和关闭 。 仅用于 i 字段 _纸牌_ 类型。 见 _自动格式分隔符_ |
| 自动格式分隔符 | 字符串 | 用于自动格式卡号的字符串 _自动格式_ 打开。 默认值为 " (空间). |
| 自动投递 | 布尔 | 一旦数据有效,就应立即取出该令牌。 此设置还将开启在提交数据时捕获从 iFrame 内部触发的提交事件 。 默认是 `true`。 。 。 . |
| 自动提交格式 | 字符串 | 如果自动投递是真实的, 可以设置窗体元素的ID, 组件会触发 _提交_ 在 iFrame 中触发提交时的窗体. |
| 占位符 | 字符串 | 拟用作 _占位符_ 输入字段的文本. |
| i 战地风格 | 对象 | 用于样式 iFields 输入元素的样式对象。 此对象被指定为 **HTMLElement. (原始内容存档于2017-09-29). 样式**。 。 。 . |

### 三维

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 启用3DS | 布尔 | 打开和关闭 3DSsecure |
| 环境 | 字符串 | 3DS环境  
有效值为:
-   装入
-   生产

这些值可以从 iFields 包导入  

import { THREEDS\_ENVIRONMENT } from "vue-cardknox-ifields";

 |
| handle3DS 报表 | [处理3DS 成果](https://npmcn.com/package/%40cardknox/vue-cardknox-ifields/#readme-handle3dsresults-callback) | 付款确认后将召回。 此数据应当由您的后端服务器发送到 Cardknox 网关 。 见 [https://docs.cardknox.com/cardknox-products/3d-security (中文(简体) )](https://docs.cardknox.com/cardknox-products/3d-secure) |

##### 处理3DS Results 回调

| 参数 |
| --- |
| 动作代码 |
| 简历 |
| ECIFlag (欧洲金融共同体) |
| 卡克诺克 |
| 状态 |
| 验证 |
| 错误 |

### 更新事件数据

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 卡片长度 | 数目 | 卡片 i Field 中的数据长度  
只从卡片 i Field 返回更新事件 |
| 事件 | 字符串 | 活动名称 |
| iField 变换 | 布尔 | 此 i 字段的值是否已经改变 |
| 时空 | 布尔 | I 字段是否为空 |
| 是瓦利德语 | 布尔 | I 字段中的数据是否有效 |
| 发行者 | 字符串 | 发卡人  
只从卡片 i Field 返回更新事件 |
| 长度 | 布尔 | I 字段数据长度  
注意: 对于卡 i Fields,这包括格式化字符. 使用 `cardNumberlength` 以获取实际数据长度. |

### 数据出错

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 结果 | 字符串 | 这将永远有价值 `error` |
| 错误 | 字符串 | 包含错误消息 |
| xTokenType 类型 | 字符串 | 无论卡,CVV,还是ACH |

  
  
  

* * *

**i 字段版本 :** [2.15.2302.0801 (中文(简体) )](https://cdn.cardknox.com/ifields/versions.htm)

## 常见问题

### @cardknox/vue-cardknox-ifields 是什么？

Cardknox i 字段的 Vue 组件

### 如何安装 @cardknox/vue-cardknox-ifields？

在项目目录运行 npm install @cardknox/vue-cardknox-ifields，或使用 pnpm add / yarn add / bun add。

### @cardknox/vue-cardknox-ifields 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cardknox\_\_vue-cardknox-ifields 是否存在。

### @cardknox/vue-cardknox-ifields 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cardknox/vue-cardknox-ifields 可以商用吗？

@cardknox/vue-cardknox-ifields 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cardknox/vue-cardknox-ifields 的下载量有多少？

根据 npm 官方下载统计，@cardknox/vue-cardknox-ifields 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,416 次，日均约 81 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cardknox/vue-cardknox-ifields 还在维护吗？

最新版本 2\.2\.86 发布于 2026/03/17（7 个月前）；至今共发布 12 个版本，其中过去 12 个月发布了 1 个；首次发布于 2020/05/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。