vue-drag-resize-rotate 拖拉拽旋转

流丶年丶

已于 2024-01-24 09:35:07 修改

阅读量915

点赞数 16

文章标签： vue.js javascript 前端

于 2024-01-23 17:59:12 首次发布

本文链接：https://blog.csdn.net/sxmfendou/article/details/135778079

版权

本文介绍了如何在Vue项目中安装并使用vue-drag-resize-rotate插件，展示了如何在模板和脚本中配置组件，以及响应拖动、缩放和旋转事件的方法。

摘要由CSDN通过智能技术生成

中文在线演示地址

1.安装

npm install  @gausszhou/vue-drag-resize-rotate

2.使用

<template>
  <div class="container">
    <vue-drag-resize-rotate
      :w="200"
      :h="200"
      :x="0"
      :y="0"
      :parent="true"
      :draggable="true"
      :resizable="true"
      :rotatable="true"
      @resizing="resizing"
      @rotating="rotating"
      :r="0"
    >
    {{angle}}
    </vue-drag-resize-rotate>
  </div>
</template>

<script>
import VueDragResizeRotate from "@gausszhou/vue-drag-resize-rotate";

export default {
  components: {
    VueDragResizeRotate,
  },
  data() {
    return {
      angle: 0,
    };
  },
  methods: {
    resizing(x, y, w, h) {
      console.log(x, y, w, h);
    },
    rotating(angle) {
      console.log(angle)
    },
  },
};
</script>