npm 地址
戳这里👆
说明
该组件适用于对一个元素在某个区域内进行拖动/缩放
示例
![](https://i-blog.csdnimg.cn/blog_migrate/d87b74748c9f512e98241a56e4c22153.gif)
安装
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 |