vue 悬浮按钮

<template>
  <div>
    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 这里放置页面的主要内容 -->
    </div>

    <!-- 悬浮按钮 -->
    <button class="floating-button" @click="handleClick">
      点击我
    </button>
  </div>
</template>

<script>
export default {
  name: 'FloatingButtonExample',
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
      alert('悬浮按钮被点击了！');
    }
  }
}
</script>

<style scoped>
.content {
  height: 2000px; /* 模拟长页面 */
}

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.floating-button:hover {
  background-color: #45a049;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 页面主要内容区域使用了一个 div 元素来模拟页面的内容。
  • 悬浮按钮通过 button 元素实现，并绑定了点击事件 @click="handleClick"。

• 脚本部分 (<script>):

  • 定义了一个名为 FloatingButtonExample 的组件。
  • methods 中定义了 handleClick 方法，当按钮被点击时会弹出一个提示框。

• 样式部分 (<style scoped>):

  • 使用了 position: fixed 来使按钮固定在页面右下角。
  • 设置了按钮的基本样式（颜色、边框、阴影等），并添加了悬停效果。
  • z-index 确保按钮不会被其他内容遮挡。