欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用vue組件實現(xiàn)圖片的拖拽和縮放功能

 更新時間：2022年01月18日 15:39:51   作者：封號斗羅-逆天而行  
這篇文章主要給大家介紹了關于利用vue組件實現(xiàn)圖片的拖拽和縮放功能的相關資料,文中通過實例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前言

vue實現(xiàn)一個組件其實很簡單但是要寫出一個好的可復用的組件那就需要多學習和鉆研一下，一個好的組件必須有其必不可少的有優(yōu)點：一是能提高應用開發(fā)效率、測試性、復用性等；二是組件應該是高內(nèi)聚、低耦合的；三是組件應遵循單向數(shù)據(jù)流的原則。

在實現(xiàn)我的圖片的拖拽組件我們的搞清其原理，在這里我使用的是mousedown,mousemove和mouseup來實現(xiàn)拖拽。

如圖所示：

方法如下：

1.新建ElementDrag.vue文件內(nèi)容如下：

<template>
    <div class="drag-outer" 
    ref="dragWrap"
    @mousemove="dragMousemove">
        <div class="drag-inner"
        ref="dragElement" 
        @mousedown="dragMousedown"
        @mouseup.stop="isMousedown = false">
            <slot></slot>
        </div>
    </div>
</template>

2. 定義moveStart用于記錄拖拽元素初始位置。定義isMousedown變量來判斷鼠標是否按下， 如果isMousedown === true鼠標移動就改變darg-inner位置。

<script>
export default {
    name: 'ElementDrag',
    data() {
        return {
            isMousedown: false, //鼠標是否按下
            moveStart: {x: 0, y: 0}, //拖拽元素初始位置
            translate: {x: 0, y: 0}, //計算拖拽元素在下下x,y方向各移動了多少
            scale: 1, //拖拽元素縮放值
        }
    },
    methods: {
        dragMousedown() {
            this.moveStart.x = event.clientX
            this.moveStart.y = event.clientY
            this.isMousedown = true 
        },
        dragMousemove() {
            if(this.isMousedown) {
                this.translate.x += (event.clientX - this.moveStart.x) / this.scale
                this.translate.y += (event.clientY - this.moveStart.y) / this.scale
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                this.moveStart.x = event.clientX
                this.moveStart.y = event.clientY
            }
        }
    }
}
</script>

3.樣式部分我們設置外層drag-outer用flex布局讓里面元素快速居中, user-drag: none;禁用圖片等元素的可拖拽屬性。

<style lang="scss" scoped>
.drag-outer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .drag-inner {
        transform-origin: center center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: move;
        user-select: none;
        >* {
            -webkit-user-drag: none;
            user-drag: none;
        }
    }
}
</style>

4.添加鼠標滾輪事件縮放drag-inner元素, e.wheelDelta為正表示放大，為負縮小，值越大表示滾動越快。通過scale控制拖拽元素縮放。同過對組件傳值scaleZoom來控制其縮放最大最小程度值。

...
methods: {
    props: {
        type: Object,
        default(){ 
            return {
                min: 0.5,
                max: 5   
            }
        }
    },
    ...
    handleScroll(e) {
        let speed = e.wheelDelta/120
        if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
            this.scale+=0.04*speed
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
        }else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){
            this.scale+=0.04*speed
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
        }
    }
},
mounted() {
    window.addEventListener('mousewheel',this.handleScroll,false) 
}

5.以上代碼已經(jīng)實現(xiàn)了功能我們預期的功能，但是為了更好的體驗，需要進一步優(yōu)化組件。添加isHover來控制鼠標是否移動到了drag-outer以外，如果isHover為false這時鼠標滾輪滾動不會縮放元素，并且將isMousedown設置為false。再使用插槽slot預覽位置。

<template>
    <div class="drag-outer" 
    ref="dragWrap"
    @mouseenter="isHover = true" 
    @mouseleave="isHover = isMousedown = false"
    @mousemove="dragMousemove">
        <div class="drag-inner"
        ref="dragElement" 
        @mousedown="dragMousedown"
        @mouseup.stop="isMousedown = false">
            <slot></slot>
        </div>
    </div>
</template>
....
data() {
    return {
        ...,
        isHover: false,
    }
},
methods: {
    ...
    handleScroll(e) {
        if(this.isHover) {
            let speed = e.wheelDelta/120
            if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
                this.scale+=0.04*speed
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
            }else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){
                this.scale+=0.04*speed
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
            }
        }
    }
}

貼上組件的最終代碼：

<template>
    <div class="drag-outer" 
    ref="dragWrap"
    :style="outerOptions"
    @mouseenter="isHover = true" 
    @mouseleave="isHover = isMousedown = false"
    @mousemove="dragMousemove">
        <div class="drag-inner"
        ref="dragElement" 
        :style="innerOptions"
        @mousedown="dragMousedown"
        @mouseup.stop="isMousedown = false">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ElementDrag',
    props: {
        outerOptions: {
            type: Object,
            default () {
                return {
                    background: 'rgba(0,0,0,0.9)'
                }
            }
        },
        innerOptions: {
            type: Object,
            default () {
                return {
                    background: 'rgba(0,0,0,0.1)',
                }
            }
        },
        scaleZoom: {
            type: Object,
            default () {
                return {
                    max: 5, 
                    min: 0.2
                }
            }
        }
    },
    data() {
        return {
            isMousedown: false,
            isHover: false,
            moveStart: {},
            translate: {x: 0, y: 0},
            scale: 1
        }
    },
    methods: {
        handleScroll(e) {
            if(this.isHover) {
                let speed = e.wheelDelta/120
                if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
                    this.scale+=0.04*speed
                    this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                }else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){
                    this.scale+=0.04*speed
                    this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                }
            }
        },
        dragMousedown() {
            this.moveStart.x = event.clientX
            this.moveStart.y = event.clientY
            this.isMousedown = true 
        },
        dragMousemove() {
            if(this.isMousedown) {
                this.translate.x += (event.clientX - this.moveStart.x) / this.scale
                this.translate.y += (event.clientY - this.moveStart.y) / this.scale
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                this.moveStart.x = event.clientX
                this.moveStart.y = event.clientY
            }
        }
    },
    mounted() {
        window.addEventListener('mousewheel',this.handleScroll,false) 
    }
}
</script>

<style lang="scss" scoped>
.drag-outer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .drag-inner {
        transform-origin: center center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: move;
        user-select: none;
        >* {
            -webkit-user-drag: none;
            user-drag: none;
        }
    }
}
</style>

在home.vue文件使用：點擊體驗

<template>
  <div class="home">
    <ElementDrag>
        <img src="https://img0.baidu.com/it/u=937276518,3474029246&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750">
    </ElementDrag>
  </div>
</template>

<script>
import ElementDrag from '@/components/ElementDrag'
export default {
  name: 'Home',
  components: {
    ElementDrag
  }
}
</script>

<style scoped>
.home {
  width: 100vw;
  height: 100vh;
} 
</style>

總結

到此這篇關于利用vue組件實現(xiàn)圖片的拖拽和縮放功能的文章就介紹到這了,更多相關vue組件實現(xiàn)圖片拖拽縮放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • design vue 表格開啟列排序的操作

    design vue 表格開啟列排序的操作

    這篇文章主要介紹了design vue 表格開啟列排序的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue組件中的數(shù)據(jù)傳遞方法

    vue組件中的數(shù)據(jù)傳遞方法

    這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-05-05
  • VUEJS 2.0 子組件訪問/調(diào)用父組件的實例

    VUEJS 2.0 子組件訪問/調(diào)用父組件的實例

    下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • Vue手動控制點擊事件Click觸發(fā)方式

    Vue手動控制點擊事件Click觸發(fā)方式

    這篇文章主要介紹了Vue手動控制點擊事件Click觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-01-01
  • vue.js動態(tài)數(shù)據(jù)綁定學習筆記

    vue.js動態(tài)數(shù)據(jù)綁定學習筆記

    這篇文章主要為大家詳細介紹了vue.js動態(tài)數(shù)據(jù)綁定學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • 利用Vue3實現(xiàn)一個可以用js調(diào)用的組件

    利用Vue3實現(xiàn)一個可以用js調(diào)用的組件

    最近遇到個功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關于如何利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的相關資料,需要的朋友可以參考下
    2021-08-08
  • vuex中mapState思想應用

    vuex中mapState思想應用

    這篇文章主要分享vuex中mapState思想及應用，在需求開發(fā)過程中，有的接口返回的結果中有很多字段需要展示到頁面上。通?？梢詫⑦@些字段在.vue文件中封裝為計算屬性，或者重新將對應字段賦值到 data 中的字段來達到便于使用的目的，具體內(nèi)容，我們一起來看下面文章內(nèi)容吧
    2021-10-10
  • vue中使用 pinia 全局狀態(tài)管理的實現(xiàn)

    vue中使用 pinia 全局狀態(tài)管理的實現(xiàn)

    本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù)(最新推薦)

    vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù)(最新推薦)

    這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應式數(shù)據(jù)并且修改賦值全部內(nèi)容，需要的朋友可以參考下
    2022-12-12
  • vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)

    vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)

    這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能) ,需要的朋友可以參考下
    2018-04-04

最新評論