Vue实现div滚轮放大缩小

 更新时间:2021年06月11日 11:10:21   作者:小城听风雨  
这篇文章主要为大家详细介绍了Vue实现div滚轮放大缩小,拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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配置项和handleTableWheeltableZoom方法即可。

<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使用AES.js的步骤详解

    vue使用AES.js的步骤详解

    AES对数据传输加密、解密处理---AES.js,下面分步骤给大家介绍vue使用AES.js的示例代码,感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • Vue中Class和Style实现v-bind绑定的几种用法

    Vue中Class和Style实现v-bind绑定的几种用法

    项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,那么在 vue 中 我们如何处理这类的效果呢?下面我们就一起来了解一下
    2021-05-05
  • Vue如何从1.0迁移到2.0

    Vue如何从1.0迁移到2.0

    这篇文章主要介绍了Vue如何从1.0迁移到2.0的相关资料,需要的朋友可以参考下
    2017-10-10
  • 在vue中使用css modules替代scroped的方法

    在vue中使用css modules替代scroped的方法

    本篇文章主要介绍了在vue中使用css modules替代scroped的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式:1、通过递归方式实现深拷贝;2、JSON.parse(JSON.stringify(obj));3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • Vue二次封装axios流程详解

    Vue二次封装axios流程详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下
    2022-10-10
  • Vue实现向PDF文件中添加二维码

    Vue实现向PDF文件中添加二维码

    这篇文章主要为大家详细介绍了如何利用Vue实现向PDF文件中添加二维码的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-06-06
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 关于下拉类型多选组件Vue-Treeselect(键名转换)

    关于下拉类型多选组件Vue-Treeselect(键名转换)

    这篇文章主要介绍了关于下拉类型多选组件Vue-Treeselect(键名转换),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 分析 Vue 中的 computed 和 watch 的区别

    分析 Vue 中的 computed 和 watch 的区别

    这篇文章分析 Vue 的 computed 和 watch 的区别,computed 用来监控自己定义的变量,页面上可直接使用。watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据,需要的朋友可以参考一下
    2021-09-09

最新评论