Skip to content

yupk/vue3-code-generator

Repository files navigation

image

简介

拖拽生成 vue3 表单

在线预览

地址

使用方法

main.js

 import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import SvgIcon from '@/components/form/SvgIcon/index.vue'; import { VueDraggableNext } from "vue-draggable-next"; import DraggableWarp from "@/components/form/DraggableWarp.vue"; import OptionInput from "@/components/form/OptionInput.vue"; import UploadWarp from "@/components/form/elementWarp/UploadWarp.vue"; import zhCn from 'element-plus/es/locale/lang/zh-cn'; import hljs from 'highlight.js'; import 'highlight.js/styles/googlecode.css' //样式文件 const app = createApp(App); app.use(ElementPlus, { locale: zhCn, }); app.component("draggable", VueDraggableNext); app.component("draggable-warp", DraggableWarp); app.component("option-input", OptionInput); app.component("svg-icon", SvgIcon); app.component("upload-warp", UploadWarp); app.directive('highlight', function (el) { let blocks = el.querySelectorAll('pre code'); setTimeout(() => { blocks.forEach((block) => { hljs.highlightBlock(block) }) }, 200) }) app.mount('#app'); 

然后就可以在项目任意处调用表单设计器了 如:

<template> <div> <page-generator device="pc" /> </div> </template> 

About

vue3 表单生成;vue3 elementui-next 自动生成代码; vue3 form make

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published