html 可移动悬浮按钮,vue悬浮按钮 vue实现可移动的悬浮按钮

想了解vue实现可移动的悬浮按钮的相关内容吗，丢失的蓝胖子在本文为您仔细讲解vue悬浮按钮的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue移动悬浮按钮,vue悬浮按钮,vue按钮，下面大家一起来学习吧。

1.html代码

class="callback float"

@click="onClick"

@mousedown="down"

@touchstart="down"

@mousemove="move"

@touchmove="move"

@mouseup="end"

@touchend="end"

ref="fu"

>

2.再data中定义

data() {

return {

isLoading: false,

flags: false, //控制使用

position: {

x: 0,

y: 0,

},

nx: "",

ny: "",

dx: "",

dy: "",

xPum: "",

yPum: "",

};

},

3.js代码

methods: {

callback() {

this.$router.go(-1);

},

onRefresh() {

// window.location.reload();

setTimeout((res) => {

console.log(res);

this.isLoading = false;

}, 1000);

},

down() {

this.flags = true;

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

this.position.x = touch.clientX;

this.position.y = touch.clientY;

this.dx = this.$refs.fu.offsetLeft;

this.dy = this.$refs.fu.offsetTop;

},

move() {

if (this.flags) {

var 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 width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度

let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度

this.xPum < 0 && (this.xPum = 0);

this.yPum < 0 && (this.yPum = 0);

this.xPum > width && (this.xPum = width);

this.yPum > height && (this.yPum = height);

// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {

this.$refs.fu.style.left = this.xPum + "px";

this.$refs.fu.style.top = this.yPum + "px";

// }

//阻止页面的滑动默认事件

document.addEventListener(

"touchmove",

function () {

event.preventDefault();

},

false

);

}

},

//鼠标释放时候的函数

end() {

this.flags = false;

},

onClick() {

//在这里我是作为子组件来使用的

this.$emit("click");

},

},

4.style样式

.callback p {

font-size: 16px;

color: #fff;

background: rgba(56, 57, 58, 0.5);

border-radius: 50%;

text-align: center;

width: 50px;

height: 50px;

line-height: 50px;

font-family: PingFang SC;

font-weight: 600;

box-shadow: 0 0 10px #fff;

}

.callback img {

display: block;

width: 50px;

height: 50px;

box-shadow: 0 0 10px rgb(133, 129, 129);

border-radius: 50%;

background: #fff;

}

.callback {

position: fixed;

top: 40px;

left: 20px;

z-index: 99999;

}

.float {

position: fixed;

right: 20px;

top: 60%;

touch-action: none;

text-align: center;

width: 50px;

height: 50px;

border-radius: 24px;

line-height: 48px;

color: white;

}

相关文章