vue设置div大小(Vue实现div滚轮放大缩小)
类别:编程学习 浏览量:493
时间:2022-01-19 00:29:29 vue设置div大小
Vue实现div滚轮放大缩小Vue项目中实现li滚轮放大缩小,拖拽效果,类似画布效果
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> <li class="is"> <li 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" > <li class="table" ref="table" @wheel.prevent="handleTableWheel($event)"> <-- iview表格,无关紧要,任何li即可 --> <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> </li> </vue-draggable-resizable> </li> </li> </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; } } // 去除画布中li边框 .vdr { border: none; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue怎么引入axios(如何用vue封装axios请求)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue怎么编写规则(vue使用节流函数的踩坑实例指南)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
热门推荐
- pythondatetime库详解(python使用time、datetime返回工作日列表实例代码)
- php抽象入门教程(php抽象方法和普通方法的区别点总结)
- python实现最简单的游戏(20行python代码的入门级小游戏的详解)
- thinkphp5怎么设置当前的模块(thinkPHP5.1框架中Request类四种调用方式示例)
- 织梦数据库连接失败是什么意思(织梦上传服务器后数据连接失败问题的解决方法)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- css3画出苹果手机(基于CSS3画一个iPhone)
- html中特殊字符
- auto.js源码分享(最新热门脚本Autojs源码分享)
- sql常见的聚合函数有哪些(SQL中的开窗函数详解可代替聚合函数使用)