vue項目實現(xiàn)按鈕可隨意移動

更新時間：2022年03月30日 08:51:15 作者：帥_帥

這篇文章主要為大家詳細介紹了vue項目實現(xiàn)按鈕可隨意移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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";
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? //阻止頁面的滑動默認事件
? ? ? ? ? ? ? ? document.addEventListener("touchmove", this.handler, {
? ? ? ? ? ? ? ? ? ? passive: false
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //鼠標釋放時候的函數(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>