拖动缩放组件(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

Events

事件名	说明	参数
mousemove	当鼠标拖动元素时触发	event
mousescroll	当元素缩放时触发	event