!65 增加表单编辑器

Merge pull request !65 from 李大饼/abp

Yi.RuoYi.Vue3/package.json

@@ -32,7 +32,8 @@
     "typeface-roboto": "^1.1.13",
     "vue": "3.4.21",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.3.0"
+    "vue-router": "4.3.0",
+    "vform3-builds": "^3.0.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

Yi.RuoYi.Vue3/src/main.js

@@ -11,6 +11,8 @@ import App from './App'
 import store from './store'
 import router from './router'
 import directive from './directive' // directive
+import VForm3 from 'vform3-builds'
+import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
 
 
 // 注册指令
@@ -77,5 +79,6 @@ app.use(ElementPlus, {
   // 支持 large、default、small
   size: Cookies.get('size') || 'default'
 })
+app.use(VForm3)
 app.mount('#app')
 

Yi.RuoYi.Vue3/src/views/tool/build/index.vue

@@ -1,3 +1,25 @@
 <template>
-   <div> 表单构建 <svg-icon icon-class="build" /> </div>
-</template>
+  <div ref="box">
+    <v-form-designer ></v-form-designer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref,onMounted} from "vue";
+
+const box = ref<Element>()
+onMounted(() =>
+{
+  box.value?.firstChild?.classList.add("not-margin")
+  box.value?.firstChild?.children[0].remove()
+})
+</script>
+
+<style lang="scss" scoped>
+div {
+  margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+}
+.not-margin{
+  margin: 0 !important;
+}
+</style>