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

Events