vue實現可移動的懸浮按鈕

阿新 • • 發佈：2021-03-04

本文例項為大家分享了vue實現可隨處移動懸浮按鈕的具體程式碼，供大家參考，具體內容如下

1.html程式碼

<div
 class="callback float"
 @click="onClick"
 @mousedown="down"
 @touchstart="down"
 @mousemove="move"
 @touchmove="move"
 @mouseup="end"
 @touchend="end"
 ref="fu"
 >
 <!-- <p @click="callback">返回</p> -->
 <img @click="callback" src="@/assets/images/callbs.jpg" alt />
</div>

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);
 QfEPxFQR 
 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() {
  //在這裡我是作為子元件來使用www.cppcns.com的
  this.$emit("click");
 },

4.style樣式

<style scoped>
.callback p {
 font-size: 16px;
 color: #ff程式設計客棧f;
 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;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。