vue專案中實現div滾輪放大縮小，拖拽效果，類似畫布效果

1、引入外掛vue-draggable-resizable，點我進入github地址。
1）、npm install --save vue-draggable-resizable
2）、main.js檔案中

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

3）、vue檔案中使用

main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

// iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI)

// 拖拽縮放畫布外掛
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable',VueDraggableResizable)

new Vue({
  el: '#app',router,components: { App },template: '<App/>'
})

vue檔案： 只需要關注引入元件vue-draggable-resizable配置項和handleTableWheel、tableZoom方法即可。

<template>
    <div class="is">
        <div
            style="height: 800px; width: 100%; border: 1px solid #000; position: relative; overflow: hidden;"
        >
            <!-- 引入元件. :lock-aspect-ratio="true"：鎖定縱橫比例 :resizable="false": 不可縮放-->
            <vue-draggable-resizable
                w="auto"
                h="auto"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :resizable="false"
            >
                <div class="table" ref="table" @wheel.prevent="handleTableWheel($event)">
                 <-- iview表格，無關緊要，任何div即可 -->
                    <Table
                        :columns="columns1"
                        :data="data1"
                        size="small"
                        :disabled-hover="true"
                        border
                    >
                        <template slot-scope="{ row,index }" slot="name">
                            <Tooltip :content="row.name" placement="top" transfer>
                                <span class="name" @click="handleCellClick(row)">{{ row.name }}</span>
                            </Tooltip>
                        </template>
                    </Table>
                </div>
            </vue-draggable-resizable>
        </div>
    </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
export default {
    name: "is",data() {
        return {
            columns1: [
                {
                    title: "Name",slot: "name",width: 120
                },{
                    title: "Age",key: "age",{
                    title: "Address",key: "address",{
                    title: "Name",key: "name",width: 120
                }
            ],data1: [
                {
                    name: "John Brown",age: 18,address: "New York No. 1 Lake Park"
                },{
                    name: "Jim Green",age: 25,address: "London No. 1 Lake Park",cellClassName: {
                        age: "demo-tabwww.cppcns.com
 
le-info-cell-age",address: "demo-table-info-cell-address"
                    }
                },{
                    name: "Joe Black",age: 30,address: "Sydney No. 1 Lake Park"
                },{
                    name: "Jon Snow",age: 26,address: "Ottawa No. 2 Lake Park",cellClassName: {
                        name: "demo-table-info-cell-name"
                    }
                },{
                    name: "John Brown",cellClassName: {
                        age: "demo-table-info-cell-age",cellClassName: {
                        name: "demo-table-info-cell程式設計客棧-name"
                    }
                }
            ]
        };
    },mounted() {},methods: {
        handleTableWheel(event) {
            let obj = this.$refs.table;
            return this.tableZoom(obj,event);
        },tableZoom(obj,http://www.cppcns.com event) {
            // 一開始預設是100%
            let zoom = parseInt(obj.style.zoom,10) || 100;
            // 滾輪滾一下wheelDelta的值增加或減少120
            zoom += event.wheelDelta / 12;
            if (zoom > 0) {
                obj.style.zoom = zoom + "%";
            }
            return false;
        },// 單擊單元格事件（用於測試拖拽是否阻止了表格預設事件，無關緊要）
        handleCellClick(row) {
            this.$Message.info("你點選了" + row.name);
        }
    }
};
</script>

<style scoped lang="less">
.is {
    .table {
        .name {
            cursor: pointer;
        }
    }
}
// iview表格樣式：iview官網複製就行,無關緊要
/deep/ .ivu-table {
    .demo-table-info-row td {
        background-color: #2db7f5;
     程式設計客棧   color: #fff;
    }
    td.demo-table-info-column {
        background-color: #2db7f5;
        color: #fff;
    }
    .demo-table-error-row td {
        background-color: #ff6600;
        color: #fff;
    }
    .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff;
    }
    .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
    .demo-table-info-cell-address {
        background-color: #187;
        color: #fff;
    }
}
// 去除畫布中程式設計客棧div邊框
.vdr {
    border: none;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。