最新

package-lock.json

@@ -13,6 +13,7 @@
         "vue": "^3.4.21",
         "vue-drag-resize": "^1.5.4",
         "vue-router": "^4.3.3",
+        "vue3-draggable-resizable": "^1.6.5",
         "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
@@ -1654,6 +1655,11 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-draggable-resizable": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz",
+      "integrity": "sha512-31142E31fGNnq3HKqvmFLSsqIbhck7TyGuQWhUKrDw6DOcGAuRx4ddRjaxvT6fe7dgeKH53qAh+i0ZlWtPLl2g=="
+    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -2674,6 +2680,11 @@
         "semver": "^7.5.4"
       }
     },
+    "vue3-draggable-resizable": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz",
+      "integrity": "sha512-31142E31fGNnq3HKqvmFLSsqIbhck7TyGuQWhUKrDw6DOcGAuRx4ddRjaxvT6fe7dgeKH53qAh+i0ZlWtPLl2g=="
+    },
     "vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "vue": "^3.4.21",
     "vue-drag-resize": "^1.5.4",
     "vue-router": "^4.3.3",
+    "vue3-draggable-resizable": "^1.6.5",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

src/components/drag/index.vue

@@ -0,0 +1,85 @@
+<template>
+    <vue-drag-resize :isActive="isActive" :w="w" :h="h" :x="left" :y="top" :minh="minh" :isResizable="isResizable"
+        :sticks="sticks" v-on:resizing="resizing" v-on:dragging="dragging" v-on:clicked="clicked"
+        @deactivated="onDeactivated">
+        <component class="draggable" :is="getWidget(dargData.type)" :config="dargData"></component>
+    </vue-drag-resize>
+</template>
+
+<script lang="ts" setup>
+import getName from '../../views/widgets/getWidget';
+import VueDragResize from 'vue-drag-resize/src'
+import { ref } from "vue";
+const w = ref(0)
+const h = ref(0)
+const top = ref(0)
+const left = ref(0)
+const minh = ref(50)
+const isResizable = ref(false)
+const sticks = ref([])
+const isActive = ref(false)
+
+const porps = defineProps({
+    dargData: {
+        type: Object,
+        required: true
+    },
+})
+w.value = porps.dargData.css.width
+h.value = porps.dargData.css.height
+minh.value = porps.dargData.css.height
+top.value = porps.dargData.css.top
+left.value = porps.dargData.css.left
+isResizable.value = porps.dargData.config.isResizable
+sticks.value = porps.dargData.config.sticks
+
+// 要实现双向数据响应要使用 defineEmits 接受父组件传递过来的 textVal 的 update函数
+// const emit = defineEmits(['dargData'])
+// 缩放时事件
+function resizing(newRect) {
+    w.value = newRect.width
+    h.value = newRect.height
+    top.value = newRect.top
+    left.value = newRect.left
+
+    porps.dargData.css.width = newRect.width
+    porps.dargData.css.height = newRect.height
+    porps.dargData.css.top = newRect.top
+    porps.dargData.css.left = newRect.left
+    // const arr = JSON.parse(JSON.stringify(porps.dargData))
+    // arr.css.width = newRect.width
+    // arr.css.height = newRect.height
+    // arr.css.top = newRect.top
+    // arr.css.left = newRect.left
+    // emit('dargData', arr, porps.indexes)
+}
+// 拖拽时事件
+function dragging(newRect) {
+    w.value = newRect.width
+    h.value = newRect.height
+    top.value = newRect.top
+    left.value = newRect.left
+
+    porps.dargData.css.width = newRect.width
+    porps.dargData.css.height = newRect.height
+    porps.dargData.css.top = newRect.top
+    porps.dargData.css.left = newRect.left
+    // const arr = JSON.parse(JSON.stringify(porps.dargData))
+    // arr.css.width = newRect.width
+    // arr.css.height = newRect.height
+    // arr.css.top = newRect.top
+    // arr.css.left = newRect.left
+    // emit('dargData', arr, porps.indexes)
+}
+// 组件点击事件
+function clicked(params) {
+    console.log(params, '组件点击事件');
+}
+function onDeactivated() {
+    console.log('点击组件外事件');
+}
+const getWidget = (name: string) => {
+    //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
+    return getName[name]
+}
+</script>

src/components/drag/resizable.vue

@@ -0,0 +1,48 @@
+<template>
+    <Vue3DraggableResizable :x="left" :y="top" :w="w" :h="h" :active="active" :draggable="true" :resizable="true"
+        @activated="print('activated')" @deactivated="print('deactivated')" @drag-start="print('drag-start')"
+        @resize-start="print('resize-start')" @dragging="print('dragging')" @resizing="print('resizing')"
+        @drag-end="print('drag-end')" @resize-end="print('resize-end')">
+        <component class="draggable" :is="getWidget(dargData.type)" :config="dargData"></component>
+    </Vue3DraggableResizable>
+</template>
+
+<script lang="ts" setup>
+import getName from '../../views/widgets/getWidget';
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
+//default styles
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+import { ref } from "vue";
+const w = ref(0)
+const h = ref(0)
+const top = ref(0)
+const left = ref(0)
+const minh = ref(50)
+const isResizable = ref(false)
+const sticks = ref([])
+const active = ref(true)
+
+const porps = defineProps({
+    dargData: {
+        type: Object,
+        required: true
+    },
+})
+w.value = porps.dargData.css.width
+h.value = porps.dargData.css.height
+minh.value = porps.dargData.css.height
+top.value = porps.dargData.css.top
+left.value = porps.dargData.css.left
+isResizable.value = porps.dargData.config.isResizable
+sticks.value = porps.dargData.config.sticks
+console.log(w.value, h.value, '------');
+
+function print(val) {
+    console.log(val)
+}
+
+const getWidget = (name: string) => {
+    //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
+    return getName[name]
+}
+</script>

src/module/config/button.ts

@@ -1,15 +1,20 @@
-const configList = {
-    type:1,
+const btnConfig = {
+    isActive: false,
+    type: 1,
+    name: '文本',
     size: 30,
     color: "#158cfb",
-    url: "https://img0.baidu.com/it/u=3017355839,3860468475&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
+    isResizable: false, //禁止缩放
+    aspectRatio: false, //禁止等比例缩放
 }
 
-const cssList = {
-    type:1,
-    size: 30,
-    color: "#158cfb",
-    url: "https://img0.baidu.com/it/u=3017355839,3860468475&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
+const btnCss = {
+    top: 20,
+    left: 20,
+    width: 90,
+    height: 90,
+    borderRadius: 8,
+    backgroundColor: '#fff',
 }
 
-export { configList, cssList }
+export { btnConfig, btnCss }

src/module/config/input.ts

@@ -1,13 +1,22 @@
 const configList1 = {
+    isActive: false,
+    type: 1,
+    name: '文本',
     size: 30,
     color: "#158cfb",
-    url: "https://img0.baidu.com/it/u=3017355839,3860468475&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
+    isResizable: true, //禁止缩放
+    // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
+    sticks: ['mr', 'ml'],
+    aspectRatio: false, //禁止等比例缩放
 }
 
 const cssList1 = {
-    size: 30,
-    color: "#158cfb",
-    url: "https://img0.baidu.com/it/u=3017355839,3860468475&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
+    top: 20,
+    left: 20,
+    width: 300,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: '#fff',
 }
 
 export { configList1, cssList1 }

src/module/index.ts

@@ -1,15 +1,15 @@
 //不同模块组件
-import { configList, cssList } from "./config/button";
+import { btnConfig, btnCss } from "./config/button";
 import { configList1, cssList1 } from "./config/input";
 
 const attributeValue = [{
     id: 1, type: 'SceneButton', name: "场景",
-    config: configList,
-    css: cssList,
+    config: btnConfig,
+    css: btnCss,
 }, {
     id: 1, type: 'SceneButton', name: "场景",
-    config: configList,
-    css: cssList,
+    config: btnConfig,
+    css: btnCss,
 }]
 
 const layout = [{
@@ -18,8 +18,8 @@ const layout = [{
     css: cssList1,
 }, {
     id: 1, type: 'SceneButton', name: "场景",
-    config: configList1,
-    css: cssList1,
+    config: btnConfig,
+    css: btnCss,
 }]
 
 export { attributeValue, layout };

src/views/HomeView.vue

@@ -29,7 +29,7 @@
             </el-icon></div>
           <span>存为草稿</span>
         </div>
-        <div class="card_right_btn">
+        <div class="card_right_btn" @click="announce">
           <div class="card_btn_item"><el-icon :size="18">
               <Promotion />
             </el-icon></div>
@@ -72,10 +72,7 @@
             :group="{ name: 'itxst', pull: false, put: true }">
             <template #item="{ element }">
               <div class="item_module_center move">
-                <vue-drag-resize :isActive="true" :w="200" :h="200" :draggable="false" :aspectRatio="false"
-                  sticks="['tl']" :preventActiveBehavior="true" v-on:resizing="resize" v-on:dragging="resize">
-                  <component class="draggable" :is="getWidget(element.type)" :config="element"></component>
-                </vue-drag-resize>
+                <VueDrag class="draggable" :dargData="element"></VueDrag>
               </div>
             </template>
           </draggable>
@@ -116,9 +113,10 @@
   
 <script lang="ts" setup>
 import Draggable from "vuedraggable";
-import VueDragResize from 'vue-drag-resize/src';
 import moduleLibrary from "../components/moduleLibrary.vue";
 import getName from './widgets/getWidget';
+// import VueDrag from '../components/drag/index.vue'
+import VueDrag from '../components/drag/resizable.vue'
 import { attributeValue, layout } from '../module/index';
 import { ref } from "vue";
 
@@ -156,23 +154,23 @@ const state = ref({
 
 //拖拽开始的事件
 const onStart = () => {
-  console.log("开始拖拽");
+  // console.log("开始拖拽");
 };
 
 //拖拽结束的事件
 const onEnd = () => {
-  console.log("结束拖拽");
+  // console.log("结束拖拽");
 };
 
-const onMove = (event: MouseEvent) => {
-  console.log(event, 266)
+const onMove = () => {
+  // event: MouseEvent
+  // console.log(event, 266)
   //不允许停靠
-  // if (event.relatedContext.element.disabledPark == true) return false;
   return true;
 };
 
 const getWidget = (name: string) => {
-  //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
+  //组件名映射
   return getName[name]
 }
 // 组件库选择
@@ -181,21 +179,17 @@ const handleReceivedData = (num: any) => {
     extraImgs.value = attributeValue
   } else if (num == 2) {
     extraImgs.value = layout
-
   }
 }
 // 切换tabs
 function handleClick(): void {
   console.log(24);
 }
-// 组件移动
-function resize(newRect) {
-  console.log(newRect, extraImgs1, 222)
-  // extraImgs1.width = newRect.width;
-  // extraImgs1.height = newRect.height;
-  // extraImgs1.top = newRect.top;
-  // extraImgs1.left = newRect.left;
+// 发布
+function announce() {
+  console.log(extraImgs1.value, 999);
 }
+
 </script>
   
 <style lang="scss" scoped>
@@ -506,4 +500,21 @@ img {
 .Bzu {
   height: 100%;
 }
+
+.vdr.active:before {
+  outline: 1px solid #0f73e6;
+}
+
+.vdr .vdr-stick-mr {
+  border-radius: 3px;
+  cursor: ew-resize;
+  height: 12px;
+}
+
+.vdr .vdr-stick {
+  background-color: #fff;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  border: 1px solid #0f73e6;
+}
 </style>

src/views/widgets/SceneButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card_btn center_in">
+    <div class="card_btn center_in" :style="{ width: config.css.width + 'px', height: config.css.height + 'px' }">
         <div class="bg_item_btn center_in">
             <el-icon :size="config.config.size" :color="config.config.color">
                 <BellFilled />
@@ -17,8 +17,6 @@ defineProps(["config", "sendSon"])
 <style lang="scss" scoped>
 .card_btn {
     flex-direction: column;
-    width: 100px;
-    height: 100px;
     background-color: #fff;
     border-radius: 8px;
 }