拖动缩放组件(vue-drag-zoom)

本文主要是介绍拖动缩放组件(vue-drag-zoom)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

npm 地址

戳这里👆

说明

该组件适用于对一个元素在某个区域内进行拖动/缩放

示例

安装

npm i vue-drag-zoom

使用

<template><div class="drag-zoom" ref="drag-zoom"><vue-drag-zoom:area-node="node"allow-zoom:range="0.2":max-zoom="10":min-zoom="0.2"><div class="drag-zoom-content">该区域可随意拖动/缩放</div></vue-drag-zoom></div>
</template><script>
import VueDragZoom from 'vue-drag-zoom';export default {components: {VueDragZoom,},data() {return {node: null,};},mounted() {this.node = this.$refs['drag-zoom'];},
};
</script><style scoped lang="less">
.drag-zoom {position: relative;width: 50%;height: 50%;margin: 100px auto;background-color: lightblue;overflow: hidden;.drag-zoom-content {width: 150px;height: 150px;background: #ff000099;}
}
</style>

API

Attributes

参数	说明	类型	可选值	默认值
left	被操作的元素 X 坐标	number	-	0
top	被操作的元素 Y 坐标	number	-	0
width	被操作的元素宽度	number	-	-
height	被操作的元素高度	number	-	-
allow-zoom	允许缩放	boolean	true	false
zoom	缩放比例	number	-	1
max-zoom	最大缩放比例	number	-	2
min-zoom	最小缩放比例	number	-	0.5
range	缩放幅度	number	-	0.1
area-node	活动区域节点	HTMLDivElement	-	-
area-left	活动区域 X 坐标 (未设置 area-node 时生效)	number	-	0
area-top	活动区域 Y 坐标 (未设置 area-node 时生效)	number	-	0
area-width	活动区域宽度 (未设置 area-node 时生效)	number	-	200
area-height	活动区域高度 (未设置 area-node 时生效)	number	-	100