1.2.1 • Published 2 months ago
iking-form v1.2.1
Iking Form For Vue 3.x
功能一览
> 拖拽式可视化表单设计;
> 支持PC、Pad、H5三种布局;
> 支持运行时动态加载表单;
> 支持表单复杂交互控制;
> 支持自定义CSS样式;
> 支持自定义校验逻辑;
> 支持国际化多语言;
> 可导出Vue组件、HTML源码;
> 可导出Vue的SFC单文件组件;
> 支持开发自定义组件;
> 支持响应式自适应布局;
> 更多功能等你探究...;
当前版本V1.0.7支持Element-Plus,预计在V1.1.0开始支持Ant-Design-Vue V3以上版本
跟Vue 3.x项目集成
1. 安装包
pnpm add iking-form
或
npm i iking-form
或
yarn add iking-form
2. 引入并全局注册IkingFrom 3组件
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' //引入element-plus库
import 'element-plus/dist/index.css' //引入element-plus样式
import IkingForm from 'iking-form' //引入IkingFrom 3库
import 'iking-form/dist/designer.style.css' //引入IkingFrom3样式
const app = createApp(App)
app.use(ElementPlus) //全局注册element-plus
app.use(IkingForm) //全局注册(同时注册了iking-form-designer和iking-form-render组件)
app.mount('#app')
3. 在Vue 3.x模板中使用表单设计器组件
<template>
<iking-form-designer ref="ikingRef"></iking-form-designer>
</template>
<script lang="ts" setup>
const ikingRef = ref(null)
</script>
<style lang="scss">
body {
margin: 0; /* 如果页面出现垂直滚动条,则加入此行CSS以消除之 */
}
</style>
4. 在Vue 3.x模板中使用表单渲染器组件
<template>
<div>
<iking-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="IkingFormRef">
</iking-form-render>
<el-button type="primary" @click="submitForm">Submit</el-button>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"ikingForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
const formData = reactive({})
const optionData = reactive({})
const IkingFormRef = ref(null)
const submitForm = () => {
IkingFormRef.value.getFormData().then(formData => {
// Form Validation OK
alert( JSON.stringify(formData) )
}).catch(error => {
// Form Validation failed
ElMessage.error(error)
})
}
</script>
6. 默认模板资源
使用默认模板需要使用 iking-form-copy
插件,将模板资源自动复制到项目的静态资源目录,默认模板资源目录为'public'
在项目配置文件 vite.config.js 或 vite.config.ts 或 rollup.config.js 或 rollup.config.ts 中引用插件即可
import type { ConfigEnv } from 'vite'
import { defineConfig } from 'vite'
import ikingFormCopy from 'iking-form-copy'
export default ({ mode }: ConfigEnv) => {
return defineConfig({
plugins: [
// 静态资源目录默认 ‘public’, 如需修改则使用 ikingFormCopy('目录名')
ikingFormCopy()
]
})
}
1.2.1
2 months ago
1.2.0
7 months ago
1.1.29
7 months ago
1.1.28
7 months ago
1.1.30
7 months ago
1.1.19
12 months ago
1.1.23
10 months ago
1.1.22
10 months ago
1.1.20
12 months ago
1.1.27
9 months ago
1.1.26
9 months ago
1.1.25
10 months ago
1.1.24
10 months ago
1.1.16
1 year ago
1.1.15
1 year ago
1.1.18
1 year ago
1.1.17
1 year ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.12
1 year ago
1.1.11
1 year ago
1.1.10
1 year ago
1.1.14
1 year ago
1.1.13
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.9
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
0.0.4
1 year ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago