vue放大缩小页面,vue拖动改变div容器宽度
这篇文章主要为大家详细介绍了某视频剪辑软件实现差异滚轮放大缩小，拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件项目中实现差异滚轮放大缩小，拖拽效果，类似画布效果
1、引入插件可拖动可调整大小，点我进入开源代码库地址。
1)、国家预防机制安装-保存vue-可拖动-可调整大小
2)、主页面文件中
从"可拖动可调整大小"导入VueDraggableResizable
导入vue-draggable-resizable/dist/vuedragableresizable。 CSS
vue。组件( vue-draggable-resizable ，VueDraggableResizable)
3)、vue文件中使用
主页. js
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
Vue.config.productionTip=false
//iview
从"视图-设计"导入ViewUI
导入"视图-设计/分布/样式/iview。CSS”；
Vue.use(ViewUI)
//拖拽缩放画布插件
从"可拖动可调整大小"导入VueDraggableResizable
导入vue-draggable-resizable/dist/vuedragableresizable。 CSS
vue。组件( vue-draggable-resizable ，VueDraggableResizable)
新Vue({
埃尔： #app ，
路由器，
组件：{ App }，
模板："应用程序/"
})
某视频剪辑软件文件：只需要关注引入组件vue-draggable-resizable配置项和handleTableWheel、tableZoom方法即可。
模板
div class=is
差异
style= height:800 px；宽度：100%;边框：1px纯色# 000;位置：相对；溢出：隐藏；
！-引入组件2008:lock-aspect-ratio= true :锁定纵横比例：resizable=false :不可缩放-
可拖动可调整大小
w=自动
h=自动
:grid=[20，40]
:x=10
:y=10
:resizable=false
div class= table ref= table @ wheel。prevent= handle table wheel($ event)
-伊维表格，无关紧要，任何差异即可-
桌子
:columns=columns1
:data=data1
大小=小
:disabled-hover=true
边界
模板slot-scope="{ row，index }"slot="name "
工具提示：content= row。名称位置=顶部转移
span class= name @ click= handleCellClick(row) { { row .name } }/span
/工具提示
/模板
/表格
/div
/vue-可拖动-可调整大小
/div
/div
/模板
脚本
从"可拖动可调整大小"导入VueDraggableResizable
导出默认值{
名称：是，
data() {
返回{
列1: [
{
标题：姓名，
插槽："名称",
宽度：120
},
{
标题："年龄",
关键字："年龄",
宽度：120
},
{
标题：地址，
关键字："地址",
宽度：120
},
{
标题：姓名，
关键字："名称",
宽度：120
},
{
标题："年龄",
关键字："年龄",
宽度：120
},
{
标题：地址，
关键字："地址",
宽度：120
},
{
标题：姓名，
关键字："名称",
宽度：120
},
{
标题："年龄",
关键字："年龄",
宽度：120
},
{
标题：地址，
关键字："地址",
宽度：120
}
],
数据1: [
{
姓名："约翰布朗",
年龄：18,
地址："纽约第一湖公园"
},
{
姓名："吉姆格林",
年龄：25,
地址："伦敦第一湖公园",
cellClassName: {
年龄："演示-表格-信息-单元格-年龄",
地址："演示-表格-信息-单元格-地址"
}
},
{
姓名："乔布雷克",
年龄：30,
地址："悉尼第一湖公园"
},
{
姓名："琼恩雪诺",
年龄：26,
地址："渥太华第二湖公园",
cellClassName: {
名称：演示-表格-信息-单元格-名称
}
},
{
姓名："约翰布朗",
年龄：18,
地址："纽约第一湖公园"
},
{
姓名："吉姆格林",
年龄：25,
地址："伦敦第一湖公园",
cellClassName: {
年龄："演示-表格-信息-单元格-年龄",
地址："演示-表格-信息-单元格-地址"
}
},
{
姓名："乔布雷克",
年龄：30,
地址："悉尼第一湖公园"
},
{
姓名："琼恩雪诺",
年龄：26,
地址："渥太华第二湖公园",
cellClassName: {
名称：演示-表格-信息-单元格-名称
}
}
]
};
},
已安装(){},
方法：{
手柄转盘(事件){
让obj=这个. refs.table
返回this.tableZoom(obj，event)；
},
tableZoom(obj，event) {
//一开始默认是100%
设zoom=parse int(obj。风格。缩放，10) 100；
//滚轮滚一下车轮三角洲的值增加或减少120
缩放=事件。车轮/12；
如果（缩放0) {
obj。风格。zoom=zoom " %
}
返回错误的
},
//单击单元格事件（用于测试拖拽是否阻止了表格默认事件，无关紧要)
handleCellClick(row) {
这个 Message.info(你点击了划。姓名)；
}
}
};
/脚本
样式范围语言=少。是{。表格{。名称{
光标：指针；
}
}
}
//iview表格样式：iview官网复制就行，无关紧要
/深/。ivu-表{。演示-表格-信息-行td {
背景色：# 2db 7 F5
颜色：# fff
}
td.demo-table-info-column {
背景色：# 2db 7 F5
颜色：# fff
}。演示表错误行td {
背景色：# ff6600
颜色：# fff
}。演示-表格-信息-单元格-名称{
背景色：# 2db 7 F5
颜色：# fff
}。演示-表格-信息-单元格-年龄{
背景色：# ff6600
颜色：# fff
}。演示-表格-信息-单元格-地址{
背景色：# 187;
颜色：# fff
}
}
//去除画布中差异边框。vdr {
边框：无；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。