lowcode-form-xtd v0.1.8

Vue 3 + Elementui Plus - Low code form generator

使用说明

安装

# pnpm
$ pnpm install element-plus
$ pnpm install lowcode-form-xtd

使用

```ts
// main.ts文件中导入
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件
import FormCase from 'lowcode-form-xtd'
import 'lowcode-form-xtd/style.css'
// 引入elementui plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// 初始化组件
app.use(FormCase)
// 使用elementui plus
app.use(ElementPlus)
app.mount('#app')
```
使用表单构造器
```js
<template>
    <!-- 表单构造器 -->
    <FormCase style="height: 100%" :language="language" :theme="theme"></FormCase>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    const language = ref('zhCn')
    const theme = ref('dark')
</script>
```
使用表单预览
```js
<template>
    <PreviewForm :data="jsonData" style="height: 100%"></PreviewForm>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    const jsonData = ref([
        {
            type: 'BaseInput',
            name: '输入框',
            isFormItem: true,
            options: {
                placeholder: '请输入内容',
                clearable: false,
                maxlength: 10,
                readonly: false,
                disabled: false,
                requested: false,
                requiredHint: '请输入内容',
                validation: '',
                validationHint: '',
                onCreated: '',
                onMounted: ''
            },
            modelValue: '',
            key: 'BaseInput_4766',
            moduleName: '输入框'
        },
        {
            type: 'BaseButton',
            name: '按钮',
            isFormItem: false,
            options: {
                buttonName: '按钮',
                type: 'primary',
                plain: false,
                round: false,
                circle: false,
                disabled: false,
                loading: false,
                icon: '',
                onCreated: '',
                onMounted: ''
            },
            key: 'BaseButton_71299',
            moduleName: '按钮'
        }
    ])
</script>
```