vue-draggable-resizable放大缩小拖拽功能

效果图

1.下载依赖

npm install --save vue-draggable-resizable

main.js引入

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.页面.vue文件中引入

  <div class="vue-draggable-resizable-div"><vue-draggable-resizablew="auto"h="auto":grid="[20, 40]":x="10":y="10":resizable="false"><divclass="tabledraggable-resizable"ref="table"@wheel.prevent="handleTableWheel($event)"><div v-html="datahtml"></div></div></vue-draggable-resizable></div>

export default {data() {return {datahtml: ` <h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4>`,}}，methods: {handleTableWheel(event) {let obj = this.$refs.table;return this.tableZoom(obj, event);},tableZoom(obj, event) {// 一开始默认是100%let zoom = parseInt(obj.style.zoom, 10) || 100;// 滚轮滚一下wheelDelta的值增加或减少120zoom += event.wheelDelta / 12;if (zoom > 0) {obj.style.zoom = zoom + "%";}return false;}}

.vue-draggable-resizable-div {position: relative;margin: auto;width: 50%;height: 200px;background-color: orange;overflow-y: auto;
}
.draggable {position: relative;margin: auto;width: 50%;background-color: pink;
}

vue-draggable-resizable放大缩小拖拽功能相关推荐

js 实现 H5 div的内容放大缩小拖拽功能 vue可用
大佬写的组件 , 虽然我看不懂但不妨碍我会用啊想去看大佬代码的点这里下面的无脑的代码时刻一.复制代码到一个单独的.vue文件然后走人去下一步 // 放大缩小页面组件 <template ...
vue 实现图片放大缩小拖拽
https://www.h5w3.com/239173.html https://blog.51cto.com/wjw1014/5411219 // 放大缩小public setTransform ( ...
vue实现鼠标滚动图片放大缩小拖拽
1.封装可放大缩小拖拽组件 <template><div class="drag-outer"ref="dragWrap":style=&qu ...
vue：实现简单的拖拽功能
背景平常做业务很容易遇到拖拽功能,没做之前总觉得会很复杂,今天来看一下到底是怎么实现的. 拖拽API 这是 HTML5 新增的 API,当给元素设置 draggable="true&quo ...
canvas 实现图片放大缩小拖拽移动端、PC端
前言实现目标:使用canvas画出地图,且可以通过鼠标滚轮缩放,拖拽:手指滑动拖拽,手势缩放 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dW ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...

vue-draggable-resizable放大缩小拖拽功能

vue-draggable-resizable放大缩小拖拽功能相关推荐

最新文章

热门文章