vue3.0拖拽缩放组件

秒速五厘米 2023-01-10 13:26 288阅读 0赞

本人开发vue3.0拖拽缩放组件，持续更新中 （最新版本 0.3.0 **支持 拖拽 、缩放、旋转、移动辅助线、激活和取消激活、复制粘贴、删除、键盘移动等功能**，预计加入撤回操作、多选全选等功能）

github地址： https://github.com/zzz0908/vue3-resize-drag
    npmjs地址: https://www.npmjs.com/package/vue3-resize-drag

demo:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70_pic_center]

## **文档** ##

**vue3.0拖拽缩放插件**

下载并引入
    npm i vue3-resize-drag -S
    yarn add vue3-resize-drag -S
    
    import vue3ResizeDrag from 'vue3-resize-drag'
    const app = createApp(App)
    app.use(vue3ResizeDrag)
    
    ## 注意:
    如果vue3.0中使用ts了,那么请在src/shims-vue.d.ts声明文件中加入此插件声明:
    declare module 'vue3-resize-drag'

**组件用法:** setup代码可抽离到其他文件，这里为了方便观看就放一起了

<template>
        <vue3ResizeDrag 
            v-for="item in data.data" 
            :key="item.name" 
            :x="item.x"   
            :y="item.y"   
            :w="100"  
            :h="100"  
            :zIndex="1"  
            @moveHandler="moveHandler"  
            @mouseUpHandler="mouseUpHandler"  
            @downHandler="downHandler"  
            :isDraggable="item.drag"  
            :isResizable="item.resize"  
            :isRotate="item.rotate"   
            :isActive="item.active"  
            :rotate="0"  
            @resizeHandler="resizeHandler"  
            @rotateHandler="rotateHandler"  
            :resizeIconSize="8"  
            :isGuide="true"   
            :guideStyle="{}"  
            @activated="activated"  
            @deactivated="deactivated"  
            @mousedown="activeMouseDown(item,index)"   
            >
            {
       {item.name}}
        </vue3ResizeDrag>
    </template>
    <script lang="ts">
    import { defineComponent ,reactive,ref} from 'vue';
    export default defineComponent({
      name: 'entry',
      setup() {
          let data = reactive({
              data:[
                {
                    x:100,
                    y:100,
                    name:'哈哈',
                    drag:false,
                    resize:true,
                    rotate:true,
                    active:false
                },
                {
                    x:200,
                    y:200,
                    name:'哈哈2',
                    drag:true,
                    resize:true,
                    rotate:true,
                    active:true
                }
            ]
          })
          const moveHandler = (data:object) => {
              console.log(data,'移动')
          }
          const downHandler = (data:object) => {
              console.log(data,'按下')
          }
          const mouseUpHandler = (data:object) => {
              console.log(data,'抬起')
          }
          const resizeHandler = (data: object) => {
              console.log(data,'缩放')
          }
          const rotateHandler = (data: object) => {
              console.log(data,'旋转')
          }
          const activated = (data: object) => {
              console.log(data,'激活')
          }
          const deactivated = (data: object) => {
              console.log(data,'取消激活')
          }
          let currentIndex = ref(-1)  // 临时存储当前激活组件的index
          //   自制激活事件 点击组件激活
          const activeMouseDown = (item:any,index: number) => {
              if(currentIndex.value === index) return
              console.log(data)
              data.data.forEach((item,i) => {
                  if(i === index){
                    item['active'] = true
                  }else{
                    item['active'] = false
                  }
              })
              currentIndex.value = index
          }
        //   保存复制的数据
          let copyData = reactive<any>({
              allData:[],
              copy:{}
          })
          document.onkeydown = function(e:any){  // 绑定键盘事件
            e = e || window.event;  //标准化事件处理
            if (e.keyCode == 46) {  // delete  按键盘delete删除
                data.data = data.data.filter((item,index) => index != currentIndex.value)
            } else if (e.ctrlKey && e.keyCode == 67) {  // Ctrl + C  // 复制
                if(currentIndex.value >= 0){
                    copyData.allData = [...data.data]
                    copyData.copy = JSON.parse(JSON.stringify(copyData.allData[currentIndex.value]))
                }
            } else if (e.ctrlKey && e.keyCode == 86) {   // Ctrl + V  // 粘贴
                copyData.allData.push(copyData.copy)
                data.data = copyData.allData
            } else if (e.ctrlKey && e.keyCode == 90) {  // Ctrl + Z  // 撤回
                //   暂时没写
            } else if (e.ctrlKey) {
                //   暂时没写
            }else if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40){  // 键盘上下左右移动激活中的组件
                  //      左                  上                  右                下
                  if(currentIndex.value >= 0){
                    switch (e.keyCode) {
                        case 37:
                              data.data[currentIndex.value].x --
                            break;
                          case 38:
                              data.data[currentIndex.value].y --
                              break;
                          case 39:
                              data.data[currentIndex.value].x ++
                              break;
                          case 40:
                              data.data[currentIndex.value].y ++
                              break;
                    }
                  }
            }
          }
          return {
              data,
              moveHandler,
              downHandler,
              mouseUpHandler,
              resizeHandler,
              rotateHandler,
              deactivated,
              activated,
              activeMouseDown
          }
      }
    });
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/57eef41072df469ba7bf278eba9b10f6.png