阴道 3.x.x 动态窗体

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

1. 费用
2. 耗时

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

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

这是 Vue 动态表单。 。 。 .

状况:稳定

这是Vue号 3.x.x 兼容版本。 从盒子里出来 Typescript 支持,可树可摇动,无障碍性得到提高,体积更轻. 用于 Vue 2.x.x 请使用库标记 2.x 数据。 。 。 .

文档

完整文献和实例

• 文档
• 演示文稿 或者你喜欢在线 这里
• 密码沙盒
• 移徙指南

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

• 成为 GitHub 的发起人
• 通过PayPal一次性捐款

优雅的独角兽

慈善机构

安装

$ npm install @asigloo/vue-dynamic-forms

如果你喜欢纱线

$ yarn add @asigloo/vue-dynamic-forms

使用量

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

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

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

const VueDynamicForms = createDynamicForms()

export const app = createApp(App)

app.use(VueDynamicForms)

在您的组件中:

<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>

演示文稿

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

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

yarn run serve

• 一般表格
• 文本字段
• 数字字段
• 选择字段
• 文本区域字段
• 无线电场
• 登录
• 自定义字段
• 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.

待办列表

• 更新文件

许可证

这个项目根据麻省理工学院许可证颁发——见 利比里亚 详细文件.