当前位置: 首页 > article >正文

上下左右移动的悬浮框/气泡

 1、示例图

 2、组件代码 

<template>
  <div>
    <div
      v-if="show"
      @mouseover="mouseover"
      @mouseout="mouseout"
      class="box"
      :style="{ top: top + 'px', left: left + 'px' }"
    >
      <div>
        <div style="text-align: right; padding-right: 5px">
          <!-- element ui组件图标 -->
          <i
            class="el-icon-circle-close"
            style="font-size: 18px; cursor: pointer"
            @click="close"
          ></i>
        </div>
        <div style="padding: 10px">
          <div>悬浮框测试</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "bubble",
  data() {
    return {
      // 悬浮框显示
      show: true,
      // 移动速度
      stepX: 1,
      stepY: 1,
      // 定时器
      timer: null,
      // 最大高度
      maxTop: 0,
      maxLeft: 0,
      // 起始位置
      top: 50,
      left: 100
    };
  },
  mounted() {
     this.init();
  },
  beforeDestroy() {
    // 销毁清除定时器
    clearInterval(this.timer);
  },
  methods: {
    /**
     * 悬浮框移动
     */
    init() {
      this.maxTop = document.documentElement.clientHeight - 130 - 5;
      this.maxLeft = document.documentElement.clientWidth - 200 - 5;
      if (this.timer == null || this.timer == undefined) {
        this.top = 50;
        this.left = 100
        this.timer = setInterval(() => {
          this.move();
        }, 20);
      }
      this.onresize();
    },
    /**
     * 移动函数,触壁反弹
     */
    move() {
      if (this.top >= this.maxTop || this.top < 50) {
        this.stepY = -this.stepY;
      }
      if (this.left >= this.maxLeft || this.left < 100) {
        this.stepX = -this.stepX;
      }
      this.top += this.stepY;
      this.left += this.stepX;
    },
    /**
     * 鼠标移入
     */
    mouseover() {
      clearInterval(this.timer);
    },
    /**
     * 鼠标移出
     */
    mouseout() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.move();
      }, 20);
    },
    /**
     * 关闭悬浮框
     */
    close() {
      clearInterval(this.timer);
      this.show = false;
    },
    /**
     * 当窗口大小调整时重置悬浮框规则
     */
    onresize() {
      const that = this;
      window.onresize = function () {
        that.init();
      };
    },
  },
};
</script>
<style scoped>
.box {
  background: #3B99FB;
  width: 200px;
  height: 130px;
  border-radius: 8px;
  position: fixed;
  text-align: left;
  padding: 10px;
  color: #ffffff;
  top: 0;
  left: 0;
  z-index: 1000;
}

.box > div {
  margin-top: 5px;
}
</style>

3、组件调用 

<template>
  <div>
    <bubble></bubble>
  </div>
</template>

<script>
import bubble from '@/xxx/bubble'; 

export default {
  components:{
    bubble
  },
}
</script>


http://www.kler.cn/a/585404.html

相关文章:

  • 基础知识《Redis解析》
  • Linux常用命令速查手册
  • MATLAB中edit函数用法
  • qt style-sheet样式不起作用问答
  • 什么是 Redis
  • HiPixel开源AI驱动的图像超分辨率的原生macOS 应用程序,使用 SwiftUI 构建并利用 Upscayl 强大的 AI 模型
  • 【6】拓扑排序学习笔记
  • Unity | 工具类:消息管理器-延迟分发
  • 如何解决 制造企业“一物多码”
  • Chrome 扩展开发 API实战:Proxy(七)
  • 呵护斜颈老人:解锁护理关键,重塑健康生活
  • 网站域名解析怎么更换DNS服务器?需要注意什么?
  • 抽象工厂模式的C++实现示例
  • 前端笔试常见的选择题目整理(HTML/CSS、JavaScript、框架、性能优化)
  • VIC模型率定验证
  • 从零基础到能独立设计单片机产品,一般需要经历哪些学习阶段?
  • 鸿蒙初级考试备忘
  • SmartFormat:轻量级文本模板库,轻松替代 string.Format
  • 如何上传文件到github
  • NAT 和 IP 直接通信的区别