z-drop-design-form

Vue3's form design component

Installation

npm i z-drop-design-form

Usage

main.ts

// script
import { createApp } from 'vue';
import App from './App.vue';
import zDropDesignForm from "z-drop-design-form"
import "z-drop-design-form/dist/designer.style.css"; //引入zDropDesignForm样式
const app = createApp(App);
app.use(zDropDesignForm); //全局注册
app.mount('#app');

Designer.vue

<template>
  <ZFormDesigner ref="zfdRef"></ZFormDesigner>
</template>

<script setup lang="ts" name="Test">
import { ref } from "vue";

const zfdRef = ref(null);
</script>

Viewer.vue

<template>
  <ZFormViewer :form-json="formJson"></ZFormViewer>
</template>

<script setup lang="ts" name="Test">
const formJson = {
  widgetList:[],
  formConfig:{}
}
</script>