vue3 拖拽缩放

最新推荐文章于 2024-09-13 22:28:05 发布

永恒y

最新推荐文章于 2024-09-13 22:28:05 发布

阅读量1.7k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47996469/article/details/124192583

版权

vue3-draggable-resizable gitHub地址

vue3-draggable-resizablehttps://github.com/a7650/vue3-draggable-resizable

安装vue3-draggable-resizable

npm install vue3-draggable-resizable

全局使用

// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

// You will have a global component named "Vue3DraggableResizable"
createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')

组件引入

import Vue3DraggableResizable from "vue3-draggable-resizable";
//default styles
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";

使用

 <div class="parent">
      <Vue3DraggableResizable
        :initW="110"  //默认宽度
        :initH="120"   //默认高度
        v-model:x="x"  //x轴
        v-model:y="y"     //y轴
        v-model:w="w" //宽
        v-model:h="h"//高
        v-model: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')"
      >
        This is a test example
      </Vue3DraggableResizable>
    </div>


js//
x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false

 const print = (val) => {
            console.log(val);
        };