實現(xiàn)vue圖片縮放方式-拖拽組件

更新時間：2022年04月18日 08:42:48 作者：撲克king

這篇文章主要介紹了實現(xiàn)vue圖片縮放方式-拖拽組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

實現(xiàn)效果如下

提供盒子，使用子組件實現(xiàn)圖片拖拽和放大

這幾天做了個沒做過的組件，以此記錄下，需要的效果是在一個dom內(nèi)，縮放拖拽圖片。

封裝的子組件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 },

配置數(shù)據(jù)

data1:{
? ? ? ? name:"data1",//標識數(shù)據(jù)
? ? ? ? imgsrc:require('@/assets/timg.jpg'),//圖片路徑
? ? ? ? imgname:"img01",//圖片對應的名字 ? 用該屬性和下面的圖片數(shù)組屬性對照，用于子組件獲取索引，給默認高亮
? ? ? ? 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>

子組件接受父組件傳遞參數(shù)，自定義指令

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;
? ? ? ? ? //預防鼠標彈起來后還會循環(huán)（即預防鼠標放上去的時候還會移動） ?
? ? ? ? ? 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;
? ? }
? }
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: