English | 中文
Thanks to JakHuang's form generator for providing the inspiration. Element Plus designer provides WYSIWYG design of most element plus components, including form design. GitHub demo url
- Supports online design of more than 99% of element plus components
- Online design of native html components
- Rich and fast component property changes
- style modification
- Component slots can be inserted online
- Form regular expression creation
- Export and copy vue3 code (supports optional and combined types)
- Export component background JSON code
- Code preview
npm install element-plus-designer
import ElementPlusDesigner from 'element-plus-designer'
import 'element-plus-designer/dist/style.css'
app.use(ElementPlusDesigner)
<script setup>
import {ref} from "vue";
const drawingList=ref([])
</script>
<template>
<element-plus-designer v-model="drawingList"></element-plus-designer>
</template>
<style>
body{
margin: 0px;
}
</style>
<script setup>
import {ref,watch} from "vue";
import data from "./data.json";
const renderJson = ref(data);
const formModel = ref(data);
watch(formModel, (val) => {
console.info(val);
}, {deep: true})
</script>
<template>
<div>
<element-plus-render :draw-item-list="renderJson" v-model="formModel"></element-plus-render>
</div>
</template>
npm install
npm run dev
npm run build
- Vue3
- Element Plus
- Vite5
- Vuedraggable((modified and used directly in the project)
- Supports the remaining 1% components
- Support event editing
Contact information: WeChat: glqqyx, QQ: 2537660666 email: [email protected]