实现效果如下
这几天做了个没做过的组件，以此记录下，需要的效果是在一个dom内，缩放拖拽图片。
封装的子组件imgbox.Vue。父组件中使用，需要在父组件中准备一个盒子用来装图片，在这个盒子中可以缩放拽拽图片。
父组件如下
父组件html部分
<!-- 普通方形盒子 --> <div class="box1"> <imgbox :config="data1" @enlarge="enlargeImg" @narrow="narrowImg" @changeImg="change"></imgbox> </div>
父组件的css部分
.box1{
width: 300px;
height: 300px;
border: 1px solid #000;
/deep/ .dragImg{//深度css，由于vue中的style标签的scoped属性不能直接给子组件样式，需要使用deep在父组件中给子组件中的dom给样式
width: 420px;//子组件中的图片大小
height: 280px;
}
/deep/ .btnbox{//深度css，由于vue中的style标签的scoped属性不能直接给子组件样式，需要使用deep在父组件中给子组件中的dom给样式
width: 70px;//子组件中按钮盒子的大小
height: 20px;
top: 20px;//子组件盒子的位置
left: 20px;
.operChange{//按钮的大小
width: 20px;
height: 20px;
}
}
}父组件应用子组件
import imgbox from './imgbox' //拖拽，放大缩小图片 子组件
components:{ imgbox },配置数据
data1:{
name:"data1",//标识数据
imgsrc:require('@/assets/timg.jpg'),//图片路径
imgname:"img01",//图片对应的名字 用该属性和下面的图片数组属性对照，用于子组件获取索引，给默认高亮
scale:1,//默认缩放1
}方法
enlargeImg:function(val){//放大图片
this[val.name].scale = this[val.name].scale 0.1
}
,narrowImg:function(val){//缩小图片
if(this[val.name].scale >= 0.1){
this[val.name].scale = this[val.name].scale - 0.1
}
}子组件imgbox.vue如下
子组件html部分
<template> <div class="myDiv"> <img class="dragImg" ref="img" name="removeImg" :src="imgsrc" v-drag :style="scaleFun"> <div class="btnbox" :ref="config.ref"> <img src="../assets/operaImg2.png" title="放大" @click="clickEnlarge" class="operChange"> <img src="../assets/operaImg3.png" title="缩小" @click="clickNarrow" class="operChange"> </div> </div> </template>
子组件接受父组件传递参数，自定义指令
export default {
components:{},
props:['config'],
data(){
return {
imgsrc:"",//图片的路径
}
},
directives:{//注册指令
drag:function(el){
let dragBox = el; //获取当前元素
dragBox.onmousedown = e => {
e.preventDefault();
//算出鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft;
let disY = e.clientY - dragBox.offsetTop;
document.onmousemove = e => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
e.preventDefault();
let left = e.clientX - disX;
let top = e.clientY - disY;
//移动当前元素
dragBox.style.left = left "px";
dragBox.style.top = top "px";
};
document.onmouseup = e => {
e.preventDefault();
//鼠标弹起来的时候不再移动
document.onmousemove = null;
//预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
document.onmouseup = null;
};
}
}
},
watch:{
config:function(val){
this.imgsrc = val.imgsrc
}
},
computed:{
scaleFun:function(){
return `transform:scale(${this.config.scale})`
}
},
created(){},
methods:{
clickEnlarge(){//点击放大
let data = this.config
this.$emit('enlarge',data)
}
,clickNarrow(){//点击缩小
let data = this.config
this.$emit('narrow',data)
}
},
}子组件css
.myDiv{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
img{
width: 100%;
height: 100%;
position: relative;
}
.btnbox{
display: flex;
position: absolute;
top: 20px;
left: 20px;
width: 70px;
height: 20px;
justify-content: space-around;
z-index: 99;
img{
width: 20px;
height: 20px;
opacity: 0.7;
cursor: pointer;
display: inline-block;
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。