Jc-form-builder NPM

表单引擎

使用

pnpm install

开发

pnpm dev

构建

pnpm build

单元测试

pnpm test:unit

代码校验

pnpm lint

form-builder-sdk

使用

npm 方式

首先将 npm 源切换至 npm 公服 https://registry.npmjs.org/。

安装

npm i jc-form-builder

html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.2.22/theme-chalk/index.min.css" />
<link rel="stylesheet" href="../dist/style.css">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.2.22/index.full.min.js"></script>
<script src="../dist/form-builder.umd.js"></script>

<form-builder ref="formBuilder" :form-data="formData" :form-field-data="formFieldData"></form-builder>

<script>
const app = Vue.createApp({
    data() {
        return {
            formData: data,
            formFieldData: {}
        }
    },
    methods: {
        getData() {
            this.$refs.formBuilder
                ?.getData()
                .then((data) => {
                    console.log(data)
                    this.formFieldData = data
                })
                .catch((err) => {
                    console.log(err, '获取数据失败')
                })
        },

        reset() {
            this.$refs.formBuilder.reset()
        }
    }
})

app.use(ElementPlus)
app.component('FormBuilder', FormBuilder.default)
app.mount('#app')
</script>

sfc

<template>
  <FormBuilder ref="formBuilder" :formData="data" :formFieldData="formFieldData" />
  <el-button type="primary" @click="getData">提交</el-button>
  <el-button @click="reset">重置</el-button>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import FormBuilder from 'form-builder'
import 'form-builder/dist/style.css'

const formFieldData = ref<Record<string, any>>({})
const formBuilder = ref<InstanceType<typeof FormBuilder>>()
function getData() {
    formBuilder.value
    ?.getData()
    .then((data) => {
        console.log(data)
        formFieldData.value = data
    })
    .catch((err: Error) => {
        console.log(err, '获取数据失败')
    })
}

function reset() {
    formBuilder.value?.reset()
}
</script>

sdk 方式

<div id="app"></div>
<button onclick="submit()">提交</button>
<button onclick="reset()">重置</button>
<button onclick="unmount()">销毁表单</button>

<script src="../dist/form-builder.sdk.js"></script>
<script>
const app = window.__FormBuilder__({
    formData: data,
    formFieldData: {}
})

app.mount('#app')

function unmount() {
    // 销毁实例
    app.unmount()
}

function reset() {
    // 重置表单
    app.reset()
}

function submit() {
    // 提交表单
    app.submit().then(data => console.log(data))
}   
</script>