vue3 对元素拖拽、缩放

我爱画页面

已于 2023-04-10 18:52:59 修改

阅读量3.5k

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-03 11:08:22 首次发布

本文链接：https://blog.youkuaiyun.com/qdm13209211861/article/details/129924960

版权

插件一：

1、安装：npm i vue3-draggable-resizable

2、在main.js中引入：

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
...
app.use(Vue3DraggableResizable);

3、基本用法：（这里举的例子是上传一张图片后，拿到图片的宽高，再给插件的宽高赋值）

<template>
  <Vue3DraggableResizable
    :lock-aspect-ratio="true"
    :handles="['tl', 'tr', 'br', 'bl']"
    :min-width="100"
    :min-height="100"
    :x="insertImgLeft"
    :y="insertImgTop"
    :w="insertImgWidth"
    :h="insertImgHeight"
    @drag-end="insertDragStop"
    @resize-end="insertResizeStop"
    class="drag_box"
  >
    <img style="cursor: pointer" :src="insertImg" @load="onImageLoad" />
  </Vue3DraggableResizable>
</template>
<script setup>
import { ref, onMounted } from "vue";

let insertImg = ref(
  "https://s3.cn-northwest-1.amazonaws.com.cn/yinlulu-glint/upload/c14624c8-9020-4c37-803b-36ec7e4ace5e.jpg"
); //插图
let insertImgHeight = ref(0); //插图高度
let insertImgWidth = ref(0); //插图宽度
let insertImgLeft = ref(0); //插图坐标
let insertImgTop = ref(105); //插图坐标

// 插图停止拖动
function insertDragStop(e) {
  console.log(e);
}
// 插图停止缩放
function insertResizeStop(e) {
  console.log(e);
}
// 通过固定插图高度为130，计算插图宽度，防止图片过大，超出屏幕
function getImg(src) {
  var img = new Image();
  img.src = src;
  img.onload = () => {
    insertImgHeight.value = 130;
    insertImgWidth.value = Math.floor((img.width * 130) / img.height);
  };
}
// 图片加载完成事件处理逻辑
function onImageLoad() {
  getImg(insertImg.value);
}
</script>

具体用法参考：https://www.npmjs.com/package/vue3-draggable-resizable/v/1.4.0

插件二：

1、安装：npm i @gausszhou/vue3-drag-resize-rotate

2、在main.js中引入：

import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate";
import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css";
...
app.use(VueDragResizeRotate);

3、基本用法：

  <div class="view-box">
    <div id="toolbar">基本组件</div>
    <div class="container">
      <VueDragResizeRotate :x="0" :y="0" :w="200" :h="200">
        <p>你可以拖着我，按照自己的意愿调整大小。1</p>
      </VueDragResizeRotate>
      <VueDragResizeRotate :x="200" :y="200" :w="200" :h="200">
        <p>你可以拖着我，按照自己的意愿调整大小。2</p>
      </VueDragResizeRotate>
    </div>
  </div>