vue項(xiàng)目實(shí)現(xiàn)按鈕可隨意移動(dòng)
vue項(xiàng)目中實(shí)現(xiàn)按鈕可隨意移動(dòng),供大家參考,具體內(nèi)容如下
組件代碼如下:
在項(xiàng)目中引入該組件即可
<template> ? <div v-show="hide" class="move-button" ref="moveBtn" ? ? ? ?@mousedown="btnDown" ? ? ? ?@touchstart="btnDown" ? ? ? ?@mousemove="btnMove" ? ? ? ?@touchmove="btnMove" ? ? ? ?@mouseup="btnEnd" ? ? ? ?@touchend="btnEnd" ? ? ? ?@touchcancel="btnEnd"> ? ? <div class="button-mainbg"> ? ? </div> ?? ?</div> </template> <script> export default { ? ? name: 'MoveButton', ? ? data() { ? ? ? ? return { ? ? ? ? ? ? hide: true, ? ? ? ? ? ? img: require('@/assets/img/moveButton.png'), ? ? ? ? ? ? flags: false, ? ? ? ? ? ? position: { ? ? ? ? ? ? ? ? x: 0, ? ? ? ? ? ? ? ? y: 0 ? ? ? ? ? ? }, ? ? ? ? ? ? nx: '', ? ? ? ? ? ? ny: '', ? ? ? ? ? ? dx: '', ? ? ? ? ? ? dy: '', ? ? ? ? ? ? xPum: '', ? ? ? ? ? ? yPum: '', ? ? ? ? ? ? isShow: false, ? ? ? ? ? ? moveBtn: {}, ? ? ? ? ? ? timer: null, ? ? ? ? ? ? currentTop:0 ? ? ? ? } ? ? }, ? ? mounted() { ? ? ? ? this.moveBtn = this.$refs.moveBtn; ? ? ? ? window.addEventListener('scroll', this.hideButton); ? ? }, ? ? beforeDestroy() { ? ? ? ? window.addEventListener('scroll', this.hideButton); ? ? }, ? ? methods: { ? ? ? ? hideButton() { ? ? ? ? ? ? this.timer&&clearTimeout(this.timer); ? ? ? ? ? ? this.timer = setTimeout(()=>{ ? ? ? ? ? ? ?this.handleScrollEnd(); ? ? ? ? ? ? },300); ? ? ? ? ? ? this.currentTop = document.documentElement.scrollTop || document.body.scrollTop; ? ? ? ? ? ? this.hide = false; ? ? ? ? }, ? ? ? ? handleScrollEnd(){ ? ? ? ? ? ? let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; ? ? ? ? ? ? if(scrollTop === this.currentTop){ ? ? ? ? ? ? this.hide = true; ? ? ? ? ? ? clearTimeout(this.timer); ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? // 實(shí)現(xiàn)移動(dòng)端拖拽 ? ? ? btnDown() { ? ? ? ? ? ? this.flags = true; ? ? ? ? ? ? let touch; ? ? ? ? ? ? if (event.touches) { ? ? ? ? ? ? ? ? touch = event.touches[0]; ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? touch = event; ? ? ? ? ? ? } ? ? ? ? ? ? this.position.x = touch.clientX; ? ? ? ? ? ? this.position.y = touch.clientY; ? ? ? ? ? ? this.dx = this.moveBtn.offsetLeft; ? ? ? ? ? ? this.dy = this.moveBtn.offsetTop; ? ? ? ? }, ? ? ? btnMove() { ? ? ? ? ? ? if (this.flags) { ? ? ? ? ? ? ? ? let touch; ? ? ? ? ? ? ? ? if (event.touches) { ? ? ? ? ? ? ? ? ? ? touch = event.touches[0]; ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? touch = event; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.nx = touch.clientX - this.position.x; ? ? ? ? ? ? ? ? this.ny = touch.clientY - this.position.y; ? ? ? ? ? ? ? ? this.xPum = this.dx + this.nx; ? ? ? ? ? ? ? ? this.yPum = this.dy + this.ny; ? ? ? ? ? ? ? ? let clientWidth = document.documentElement.clientWidth; ? ? ? ? ? ? ? let clientHeight = document.documentElement.clientHeight; ? ? ? ? ? ? ? ? if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) { ? ? ? ? ? ? ? ? ? ? this.moveBtn.style.left = this.xPum + "px"; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) { ? ? ? ? ? ? ? ? ? ? this.moveBtn.style.top = this.yPum + "px"; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? //阻止頁(yè)面的滑動(dòng)默認(rèn)事件 ? ? ? ? ? ? ? ? document.addEventListener("touchmove", this.handler, { ? ? ? ? ? ? ? ? ? ? passive: false ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? //鼠標(biāo)釋放時(shí)候的函數(shù) ? ? ? ? btnEnd() { ? ? ? ? ? ? this.flags = false; ? ? ? ? ? ? document.addEventListener('touchmove', this.handler, { ? ? ? ? ? ? ? ? passive: false ? ? ? ? ? ? }); ? ? ? ? }, ? ? ? ? handler(e) { ? ? ? ? ? ? if(this.flags){ ? ? ? ? ? ? ? ? event.preventDefault(); ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? return true ? ? ? ? ? ? } ? ? ? ? } ? ? } } </script> <style lang="stylus" scoped> .move-button { ? ? border-radius:50%; ? ? width: 50px; ? ? height: 50px; ? ? position: fixed; ? ? z-index: 10; ? color: #FFF; ? .button-mainbg{ ? ? position: relative; ? ? width:50px; ? ? height:50px; ? ? border-radius:50%; ? ? background: url("../../assets/img/moveButton.png") no-repeat; ? ? background-size: 50px 50px; ? } } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼
本篇文章主要介紹了Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn),詳細(xì)介紹了使用vue編寫(xiě)的日期組件,,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流)
這篇文章主要介紹了vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11