vue項目實現(xiàn)按鈕可隨意移動
更新時間:2022年03月30日 08:51:15 作者:帥_帥
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)按鈕可隨意移動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
vue項目中實現(xiàn)按鈕可隨意移動,供大家參考,具體內(nèi)容如下
組件代碼如下:
在項目中引入該組件即可
<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); ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? // 實現(xiàn)移動端拖拽 ? ? ? 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"; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? //阻止頁面的滑動默認(rèn)事件 ? ? ? ? ? ? ? ? document.addEventListener("touchmove", this.handler, { ? ? ? ? ? ? ? ? ? ? passive: false ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? //鼠標(biāo)釋放時候的函數(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03基于vue2.0+vuex的日期選擇組件功能實現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實現(xiàn),詳細(xì)介紹了使用vue編寫的日期組件,,非常具有實用價值,需要的朋友可以參考下。2017-03-03Vue加載讀取本地txt/json等文件的實現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流)
這篇文章主要介紹了vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11