lowcode-form-xtd
v0.1.8
Published
## 使用说明
Downloads
438
Readme
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')
```
使用表单构造器
```vue
<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>
```
使用表单预览
```vue
<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>
```