vue3 对元素拖拽、缩放
vue3对元素拖拽和缩放
·
插件一:
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>
具体用法参考:https://gausszhou.github.io/vue3-drag-resize-rotate/#/basic/basic-basic-component
4、示意图:
注意:如果想在vue2中使用,可以参考 https://github.com/gausszhou/vue-drag-resize-rotate
更多推荐
已为社区贡献3条内容
所有评论(0)