vue 组件拖拽,vue点击图片放大组件
这篇文章主要给大家介绍了关于利用某视频剪辑软件组件实现图片的拖拽和缩放功能的相关资料，文中通过实例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下
目录
前言如图所示：方法如下：总结
前言
某视频剪辑软件实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下，一个好的组件必须有其必不可少的有优点：一是能提高应用开发效率、测试性、复用性等；二是组件应该是高内聚、低耦合的；三是组件应遵循单向数据流的原则。
在实现我的图片的拖拽组件我们的搞清其原理，在这里我使用的是鼠标按下，鼠标移动和鼠标抬起来实现拖拽。
如图所示：
方法如下：
1.新建ElementDrag.vue文件内容如下：
模板
div class=向外拖动
ref=dragWrap
@mousemove=dragMousemove
div class=拖动内部
ref=dragElement
@mousedown=dragMousedown
@ mouseup。stop= isMousedown=false
插槽/插槽
/div
/div
/模板
2.定义移动开始用于记录拖拽元素初始位置。定义isMousedown变量来判断鼠标是否按下，如果isMousedown===true鼠标移动就改变达尔格-内位置。
脚本
导出默认值{
名称：元素拖动，
data() {
返回{
isMousedown: false，//鼠标是否按下
moveStart: {x: 0，y: 0}，//拖拽元素初始位置
translate: {x: 0，y: 0}，//计算拖拽元素在下下x，y方向各移动了多少
比例：1,//拖拽元素缩放值
}
},
方法：{
dragMousedown() {
this.moveStart.x=event.clientX
this.moveStart.y=event.clientY
this.isMousedown=true
},
dragMousemove() {
如果(this.isMousedown) {
这个。翻译。x=(事件。clientx-这个。移动开始。x)/这个。规模
这个。翻译。y=(事件。客户-这个。移动开始。y)/这个。规模
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
this.moveStart.x=event.clientX
this.moveStart.y=event.clientY
}
}
}
}
/脚本
3.样式部分我们设置外层向外拖动用弯曲布局让里面元素快速居中，用户拖动：无；禁用图片等元素的可拖拽属性。
样式lang=scss 范围。向外拖动{
宽度：100%;
身高：100%;
溢出：隐藏；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；拖动-内部{
变换-原点：中心中心；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
光标：移动；
用户选择：无；
* {
-网络工具包-用户-拖动：无；
用户拖动：无；
}
}
}
/风格
4.添加鼠标滚轮事件缩放拖动-内部元素，电动轮三角为正表示放大，为负缩小，值越大表示滚动越快。通过规模控制拖拽元素缩放。同过对组件传值缩放来控制其缩放最大最小程度值。
.
方法：{
道具：{
类型：对象，
默认(){
返回{
最小值：0.5,
最多5个
}
}
},
.
手柄卷轴(e) {
让速度=e.wheelDelta/120
如果(e .轮0这个。缩放这个。缩放比例。最大){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
} else if(e轮delta 0 this。缩放这个。缩放比例。最小){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
}
}
},
已安装(){
窗户。addevent侦听器(鼠标滚轮，this.handleScroll，false)
}
5.以上代码已经实现了功能我们预期的功能，但是为了更好的体验，需要进一步优化组件。添加伊索弗来控制鼠标是否移动到了向外拖动以外，如果伊索弗为错误的这时鼠标滚轮滚动不会缩放元素，并且将isMousedown设置为错误。再使用插槽狭槽预览位置。
模板
div class=向外拖动
ref=dragWrap
@mouseenter=isHover=true
@ mouse leave= is hover=isMousedown=false
@mousemove=dragMousemove
div class=拖动内部
ref=dragElement
@mousedown=dragMousedown
@ mouseup。stop= isMousedown=false
插槽/插槽
/div
/div
/模板
.
data() {
返回{
.
isHover:假的，
}
},
方法：{
.
手柄卷轴(e) {
如果(this.isHover) {
让速度=e.wheelDelta/120
如果(e .轮0这个。缩放这个。缩放比例。最大){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
} else if(e轮delta 0 this。缩放这个。缩放比例。最小){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
}
}
}
}
贴上组件的最终代码：
模板
div class=向外拖动
ref=dragWrap
:style=outerOptions
@mouseenter=isHover=true
@ mouse leave= is hover=isMousedown=false
@mousemove=dragMousemove
div class=拖动内部
ref=dragElement
:style=innerOptions
@mousedown=dragMousedown
@ mouseup。stop= isMousedown=false
插槽/插槽
/div
/div
/模板
脚本
导出默认值{
名称：元素拖动，
道具：{
外部选项：{
类型：对象，
默认(){
返回{
背景：" rgba(0，0，0，0.9)"
}
}
},
innerOptions: {
类型：对象，
默认(){
返回{
背景： rgba(0，0，0，0.1)，
}
}
},
缩放比例：{
类型：对象，
默认(){
返回{
最大：5,
最小值：0.2
}
}
}
},
data() {
返回{
isMousedown:假，
isHover:假的，
moveStart: {}，
翻译：{x: 0，y: 0}，
比例：1
}
},
方法：{
手柄卷轴(e) {
如果(this.isHover) {
让速度=e.wheelDelta/120
如果(e .轮0这个。缩放这个。缩放比例。最大){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
} else if(e轮delta 0 this。缩放这个。缩放比例。最小){
this.scale=0.04 *速度
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
}
}
},
dragMousedown() {
this.moveStart.x=event.clientX
this.moveStart.y=event.clientY
this.isMousedown=true
},
dragMousemove() {
如果(this.isMousedown) {
这个。翻译。x=(事件。clientx-这个。移动开始。x)/这个。规模
这个。翻译。y=(事件。客户-这个。移动开始。y)/这个。规模
这个参考文献。拖动元素。风格。transform=` scale($ { this。scale })translate($ { this。翻译。x } px，${this.translate.y}px)`
this.moveStart.x=event.clientX
this.moveStart.y=event.clientY
}
}
},
已安装(){
窗户。addevent侦听器(鼠标滚轮，this.handleScroll，false)
}
}
/脚本
样式lang=scss 范围。向外拖动{
宽度：100%;
身高：100%;
溢出：隐藏；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；拖动-内部{
变换-原点：中心中心；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
光标：移动；
用户选择：无；
* {
-网络工具包-用户-拖动：无；
用户拖动：无；
}
}
}
/风格
在home.vue文件使用：点击体验
模板
div class=home
元素拖动
img src= https://img 0百度一下。com/it/u=937276518，3474029246fm=253 fmt=auto app=138 f=JPEG？w=500h=750
/元素拖动
/div
/模板
脚本
从" @/组件/元素拖动"导入元素拖动
导出默认值{
姓名：家，
组件：{
元素拖动
}
}
/脚本
样式范围。主页{
宽度：100vw
身高：100vh
}
/风格
总结
到此这篇关于利用某视频剪辑软件组件实现图片的拖拽和缩放功能的文章就介绍到这了，更多相关某视频剪辑软件组件实现图片拖拽缩放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。