element-plus-designer's Introduction

Element Plus designer

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

Functional Overview

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

Usage

Use in your project

npm install element-plus-designer

Copy preview.html to your project root directory

Enter the following code in main.js

import  ElementPlusDesigner from 'element-plus-designer'
import 'element-plus-designer/dist/style.css'
app.use(ElementPlusDesigner)

If you need to design, please enter the following code in *.vue

<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>

Only use render, please enter the following code in *.vue

<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>