滚轮放大缩小的功能还是比较常见的，本文给大家分享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",
                    width: 120
                },
                {
                    title: "Address",
                    key: "address",
                    width: 120
                },
                {
                    title: "Name",
                    key: "name",
                    width: 120
                },
                {
                    title: "Age",
                    key: "age",
                    width: 120
                },
                {
                    title: "Address",
                    key: "address",
                    width: 120
                },
                {
                    title: "Name",
                    key: "name",
                    width: 120
                },
                {
                    title: "Age",
                    key: "age",
                    width: 120
                },
                {
                    title: "Address",
                    key: "address",
                    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-table-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",
                    age: 18,
                    address: "New York No. 1 Lake Park"
                },
                {
                    name: "Jim Green",
                    age: 25,
                    address: "London No. 1 Lake Park",
                    cellClassName: {
                        age: "demo-table-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"
                    }
                }
            ]
        };
    },
    mounted() {},
    methods: {
        handleTableWheel(event) {
            let obj = this.$refs.table;
            return this.tableZoom(obj, event);
        },
        tableZoom(obj, 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>

    关于vue中实现div内滚轮放大缩小的功能就介绍到这，本文代码有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 什么是单行代码，有哪些实用且高效率的单行代码

  这篇文章主要给大家分享了十八个杀手级JavaScript单行代码,这些单行代码可以帮助你提高工作效率并可以帮助调试代码,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友可以参考下

• vue数据绑定原理是什么？怎样实现？

  vue数据绑定原理是什么？其实其实原理很简单，就是拦截了Object的get/set方法，在对数据进行set(obj.aget=18)时去重现渲染视图，那么具体要怎样实现vue数据绑定呢？下面给大家分享两种实现方式。

• 怎样用vue实现一个无缝轮播效果？

  怎样用vue实现一个无缝的轮播效果？对于轮播效果的应用场景有很多，我们经常能在网站的头部看到，轮播功能也是比较实用的，但是一些新手在刚接触轮播时，实现的轮播效果有缝隙，效果并不好看，对此下面小编就给大家分享实现无缝轮播效果的代码。

• JS中怎样删除数组末尾元素？教你两种方法

  JS中怎样删除数组末尾元素？有时候我们想要删除数组的末尾一个或多个元素，有方法可以实现呢？下面小编给大家介绍两个方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 基于Vue框架怎样实现一个带有动画的悬浮球

  Vue实现PC端靠边悬浮球的代码，我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。