vue3快速实现拖拉拽代码组件

梓喻

已于 2025-02-25 13:10:20 修改

阅读量1.1k

点赞数 16

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue3拖拉拽简单的拖拉拽代码通过vue3组件化拖拉拽

于 2025-01-06 09:08:24 首次发布

本文链接：https://blog.csdn.net/wzp20092009/article/details/144955521

代码非常简单，就是控制缩放和移动的位置即可。

使用时，直接作为一个组件引入，需要缩放的内容内嵌就好了。

<template>
  <div :class="['dragmap', isFullScreen ? 'dragmap-fullscreen' : '']" ref="areaWrap" @mousewheel.prevent="rollArea">
    <div class="dragmap-cont" ref="area" @mousedown.prevent="moveArea">
      <slot></slot>
    </div>
    <div class="dragmap-tool">
    	<span class="cursor-pointer" @click="ctrlPlus">放大</span>
    	<span class="cursor-pointer"  @click="ctrlMinus">缩小</span>
    	<span class="cursor-pointer" @click="ctrlFullScreen">{
  
  {isFullScreen ? '取消全屏' : '全屏'}}</span>
    	<span class="cursor-pointer" @click="ctrlRefresh">重置</span>
    </div>