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浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vue统计代码行数(vue实现计数器简单制作)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
热门推荐
- 云主机和免备案空间(租用国内免备案云服务器空间靠谱吗?)
- docker服务重启容器是否重启(docker自定义网桥docker0及docker的开启,关闭,重启命令操作)
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- python ssh 连接(python pexpect ssh 远程登录服务器的方法)
- python内置函数使用方法(Python神奇的内置函数locals的实例讲解)
- mysql索引的机制(Mysql索引选择以及优化详解)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- mysql 死锁产生的原因和必要条件(Mysql查看死锁与解除死锁的深入讲解)
- 从零开始学activemq(ActiveMQ:使用Python访问ActiveMQ的方法)
- apache实时框架(教你快速开启Apache SkyWalking的自监控)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9