vue点击图片放大组件,vue拖拽组件生成页面
本文主要介绍了vue图像缩放方法的实现——拖拽组件，具有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
实现效果如下：父组件如下，子组件imgbox.vue如下。
实现效果如下
我做了一个这几天都没做的组件，来记录需要的效果是在一个dom里缩放拖动图片。
封装子组件imgbox。的威力。在父组件中使用，需要在父组件中准备一个盒子来存放图片，在里面可以缩放和拖动图片。
父组件如下
父组件html部件
！-普通的方形盒子-
div class=box1
imgbox:config= data1 @ enlarge= enlarge img @ narrow= narrow img @ change img= change /imgbox
/div
父组件的Css部分
. box1{
宽度：300px
高度：300px
边框：1px纯色# 000；
/深/。dragImg{//deep css，因为vue中style标签的scoped属性不能直接样式化子组件，所以需要在父组件中使用deep来样式化子组件中的dom。
宽度：420px//子组件中图片的大小
高度：280px
}
/深/。btnbox{//deep css，因为vue中style标签的scoped属性不能直接样式化子组件，所以需要在父组件中使用deep来样式化子组件中的dom。
宽度：70px//子组件中按钮框的大小
高度：20px
top:20px；//子组件框的位置
左：20px
的大小。operChange{//按钮
宽度：20px
高度：20px
}
}
}
父组件应用子组件。
的Imgbox。/imgbox //拖放以放大和缩小图片子组件。
组件：{ imgbox }，
格式数据
数据1:{
Name:data1 ，//标识数据
Img: require (@/assets/timg.jpg )，//图像路径
Imgname:img01 ，//图片对应的名称与下面的图片数组属性进行比较，该属性用于获取子组件的索引，默认高亮显示。
小数位数：1，//默认小数位数是1
}
方法
large img:function(val){//放大图片
这个[val.name]。scale=this[val.name]。比例0.1
}
，narrowImg:function(val){//缩小图片
如果(这个【val.name】。scale=0.1){
这个[val.name]。scale=this[val.name]。比例- 0.1
}
}
子组件imgbox.vue如下
组件html部件
模板
div class=myDiv
img class= drag img ref= img name= remove img :src= img src v-drag:style= scale fun
div class= btnbox :ref= config . ref
Src=./assets/opera img 2 . png title= zoom in @ click= clicklarge class= oper change
Img=./assets/opera img 3 . png title= zoom out @ click= click narrow class= oper change
/div
/div
/模板
子组件接受父组件传递的参数并自定义指令。
导出默认值{
组件：{}，
道具：[config]，
data(){
返回{
Img: ，//图片的路径
}
},
指令：{//注册指令
拖动：函数(el){
设dragBox=el//获取当前元素
dragBox.onmousedown=e={
e . prevent default()；
//计算出鼠标相对于元素的位置
let disX=e . clientx-dragbox . offset left；
let disY=e . clienty-dragbox . offsettop；
document.onmousemove=e={
//用鼠标位置减去鼠标相对于元素的位置，得到元素的位置。
e . prevent default()；
let left=e . clientx-disX；
let top=e . clienty-disY；
//移动当前元素
dragbox . style . left=left px ；
dragbox . style . top=top px ；
};
document.onmouseup=e={
e . prevent default()；
//鼠标弹出时不动。
document.onmousemove=null
//防止鼠标弹出后循环(也就是防止鼠标放上去的时候不动)
document.onmouseup=null
};
}
}
},
观察：{
配置：函数(val){
this.imgsrc=val.imgsrc
}
},
计算值：{
scaleFun:function(){
返回“transform:scale($ { this . config . scale })”
}
},
已创建(){}，
方法：{
ClickEnlarge(){//点击放大。
让data=this.config
这个。$emit(放大，数据)
}
，clickNarrow(){//单击缩小。
让data=this.config
这个$emit(窄，数据)
}
},
}
子组件钢性铸铁。myDiv{
宽度：100%;
身高：100%;
位置：相对；
溢出：隐藏；
img{
宽度：100%;
身高：100%;
位置：相对；
}。btnbox{
显示器：flex
位置：绝对；
top:20px；
左：20px
宽度：70px
高度：20px
justify-content:space-around；
z指数：99;
img{
宽度：20px
高度：20px
不透明度：0.7;
光标：指针；
显示：内嵌-块；
}
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。