当前位置：首页 > VUE

vue实现悬浮窗效果

2026-02-25 04:45:11VUE

Vue 实现悬浮窗效果的方法

使用 CSS 固定定位

通过 CSS 的 position: fixed 属性实现悬浮窗的基础样式，结合 Vue 的数据绑定控制显示与隐藏。

<template>
  <div class="floating-window" v-if="isVisible" :style="{ top: top + 'px', left: left + 'px' }">
    <div class="header" @mousedown="startDrag">
      悬浮窗标题
      <button @click="isVisible = false">关闭</button>
    </div>
    <div class="content">
      悬浮窗内容
    </div>
  </div>
  <button @click="isVisible = true">显示悬浮窗</button>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      top: 100,
      left: 100,
      isDragging: false,
      offsetX: 0,
      offsetY: 0
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.offsetX = e.clientX - this.left;
      this.offsetY = e.clientY - this.top;
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(e) {
      if (this.isDragging) {
        this.left = e.clientX - this.offsetX;
        this.top = e.clientY - this.offsetY;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style>
.floating-window {
  position: fixed;
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.header {
  padding: 8px;
  background: #f5f5f5;
  cursor: move;
  display: flex;
  justify-content: space-between;
}
.content {
  padding: 16px;
}
</style>

使用第三方库（如 vue-draggable）

对于更复杂的拖拽需求，可以使用 vue-draggable 或 vuedraggable 库简化实现。

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable v-model="position" :options="{ handle: '.header' }">
    <div class="floating-window" v-if="isVisible">
      <div class="header">
        悬浮窗标题
        <button @click="isVisible = false">关闭</button>
      </div>
      <div class="content">
        悬浮窗内容
      </div>
    </div>
  </draggable>
  <button @click="isVisible = true">显示悬浮窗</button>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      isVisible: false,
      position: { x: 100, y: 100 }
    };
  }
};
</script>

<style>
.floating-window {
  position: fixed;
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  left: v-bind('position.x + "px"');
  top: v-bind('position.y + "px"');
}
.header {
  padding: 8px;
  background: #f5f5f5;
  cursor: move;
  display: flex;
  justify-content: space-between;
}
.content {
  padding: 16px;
}
</style>

动态挂载组件

通过 Vue.extend 动态创建组件实例并挂载到 DOM，适合全局悬浮窗场景。

// FloatingWindow.vue
export default {
  template: `
    <div class="floating-window">
      <div class="content">{{ message }}</div>
    </div>
  `,
  props: ['message'],
  mounted() {
    document.body.appendChild(this.$el);
  },
  beforeDestroy() {
    this.$el.remove();
  }
};

// 使用方式
const FloatingConstructor = Vue.extend(FloatingWindow);
const instance = new FloatingConstructor({
  propsData: { message: '动态内容' }
}).$mount();