# @asigloo/vue-dynamic-forms 中文文档

规范地址：https://npmcn.com/package/%40asigloo/vue-dynamic-forms/

版本：3\.18\.1
npm 元数据更新时间：2022-04-04T15:46:16.786Z
中文译文更新时间：2026-11-06T23:22:08.061Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40asigloo/vue-dynamic-forms
原文对照：https://npmcn.com/package/%40asigloo/vue-dynamic-forms/?lang=original

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

- 包体积（解压后）：164 kB，21 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2020-03-22T09:35:52.426Z
- 最新版本发布：2022-02-07T12:50:02.189Z
- 近 30 天下载量：3069（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：87（近 12 个月 0 个）

## 中文简介

基于不同商业对象模式的活性反应形式

## 安装

```sh
npm install @asigloo/vue-dynamic-forms
```

也可以使用：`pnpm add @asigloo/vue-dynamic-forms`、`yarn add @asigloo/vue-dynamic-forms`、`bun add @asigloo/vue-dynamic-forms`

## README

![Library Banner](https://res.cloudinary.com/alvarosaburido/image/upload/v1589993773/portfolio/web/vue-dynamic-forms/open-graph-preview_kv4glm.png)

# 阴道 `3.x.x` 动态窗体

 [![Current npm version](https://badgen.net/npm/v/@asigloo/vue-dynamic-forms)](https://www.npmjs.com/package/@asigloo/vue-dynamic-forms)[![Minified size](https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms) ](https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms)[![Vue.js version](https://flat.badgen.net/badge/vue.js/3.x.x/4fc08d?icon=github)](https://vuejs.org/)

实施手工制作的表格可以是:

1.  费用
2.  耗时

特别是如果你需要创造出一种非常大的形式,其中投入是相近的,它们经常变化以满足迅速变化的商业和监管要求.

那么,创造出动态的形式难道不更经济吗? 基于描述商业对象模型的元数据?

这是 **Vue 动态表单**。 。 。 .

## 状况:稳定

这是Vue号 `3.x.x` 兼容版本。 从盒子里出来 `Typescript` 支持,可树可摇动,无障碍性得到提高,体积更轻. 用于 Vue `2.x.x` 请使用库标记 [2.x 数据](https://github.com/alvarosaburido/vue-dynamic-forms/tree/2.x)。 。 。 .

## 文档

完整文献和实例

-   **[文档](https://vue-dynamic-forms.alvarosaburido.dev/)**
-   **[演示文稿](https://npmcn.com/package/%40asigloo/vue-dynamic-forms/#readme-demos)** 或者你喜欢在线 [这里](https://vue-dynamic-forms-demos.alvarosaburido.dev/)
-   **[密码沙盒](https://codesandbox.io/s/vue-dynamic-forms-3xx-wfpix?file=/src/App.vue)**
-   **[移徙指南](https://vue-dynamic-forms.alvarosaburido.dev/guide/migration-guide.html)**

## 你可以帮我继续做这个计划

-   [成为 GitHub 的发起人](https://github.com/sponsors/alvarosaburido)
-   [通过PayPal一次性捐款](https://paypal.me/alvarosaburido)

#### 优雅的独角兽

[![OmgImAlexis](https://avatars.githubusercontent.com/u/6525926?v=4)](https://github.com/OmgImAlexis)

#### 慈善机构

[![easingthemes](https://avatars.githubusercontent.com/u/2750284?v=4)](https://github.com/easingthemes)

## 安装

```bash
$ npm install @asigloo/vue-dynamic-forms
```

如果你喜欢纱线

```bash
$ yarn add @asigloo/vue-dynamic-forms
```

## 使用量

安装和用法有变化,以配合新的Vue 3插件安装.

创建一个新的 `Dynamic Form` 实例,使用 `createDynamicForms` 函数;

```js
import { createApp } from 'vue'
import { createDynamicForms } from '@asigloo/vue-dynamic-forms'

const VueDynamicForms = createDynamicForms()

export const app = createApp(App)

app.use(VueDynamicForms)
```

在您的组件中:

```javascript
<template>
  <dynamic-form :form="form" @change="valueChanged" />
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue';

import {
  CheckboxField,
  TextField,
  SelectField,
} from '@asigloo/vue-dynamic-forms';

export default defineComponent({
  name: 'BasicDemo',
  setup() {
    const form = ref({
      id: 'basic-demo',
      fields: {
        username: TextField({
          label: 'Username',
        }),
        games: SelectField({
          label: 'Games',
          options: [
            {
              value: 'the-last-of-us',
              label: 'The Last of Us II',
            },
            {
              value: 'death-stranding',
              label: 'Death Stranding',
            },
            {
              value: 'nier-automata',
              label: 'Nier Automata',
            },
          ],
        }),
        checkIfAwesome: CheckboxField({
          label: 'Remember Me',
        }),
      },
    });

    function valueChanged(values) {
      console.log('Values', values);
    }

    return {
      form,
      valueChanged,
    };
  },
});
</script>
```

## 演示文稿

![Vue Dynamic Forms Demo](https://res.cloudinary.com/alvarosaburido/image/upload/v1610265908/vue-dynamic-forms-demo.png)

我们准备了一些演示,以显示库的不同使用例和如何使用每种类型的输入字段.

检查他们只是运行命令铃声 运行应用程序在 `http://localhost:3000/`

```
yarn run serve
```

-   [x] 一般表格
-   [x] 文本字段
-   [x] 数字字段
-   [x] 选择字段
-   [x] 文本区域字段
-   [x] 无线电场
-   [x] 登录
-   [x] 自定义字段
-   [ ] Axios 形式( 从 API 获取形式结构)
-   [ ] 尾风CSS型式

## 发展

### 项目设置

```
yarn install
```

### 编译和重装

```
yarn run serve
```

### 编制和修改用于生产

```
yarn run build
```

### 生成类型

```
yarn run build:dts
```

### 林特和修正文件

```
yarn run lint
```

### 运行您的单位测试

```
yarn run test
```

### 运行您的e2e测试

```
yarn run test
```

## 捐款

如果你觉得这个库有用,并且你想帮助改进,维护它或者仅仅想要一个新的功能,可以自由接触我,或者可以自由做一个PR-Q.

## 待办列表

-   [ ] 更新文件

## 许可证

这个项目根据麻省理工学院许可证颁发——见 [利比里亚](https://npmcn.com/package/%40asigloo/vue-dynamic-forms/LICENSE.md) 详细文件.

## 常见问题

### @asigloo/vue-dynamic-forms 是什么？

基于不同商业对象模式的活性反应形式

### 如何安装 @asigloo/vue-dynamic-forms？

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

### @asigloo/vue-dynamic-forms 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @asigloo/vue-dynamic-forms 支持 ESM 还是 CommonJS？

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

### @asigloo/vue-dynamic-forms 可以商用吗？

@asigloo/vue-dynamic-forms 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @asigloo/vue-dynamic-forms 的下载量有多少？

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

### @asigloo/vue-dynamic-forms 还在维护吗？

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