vue实现悬浮窗

Vue 实现悬浮窗的方法

使用 CSS 固定定位

通过 CSS 的 position: fixed 属性可以实现悬浮窗效果。在 Vue 中，可以动态绑定样式或类名来控制悬浮窗的位置和显示状态。

<template>
  <div class="floating-window" :style="{ top: top + 'px', left: left + 'px' }">
    <div class="header" @mousedown="startDrag">
      悬浮窗标题
    </div>
    <div class="content">
      悬浮窗内容
    </div>
  </div>
</template>

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

<style>
.floating-window {
  position: fixed;
  width: 300px;
  height: 200px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.header {
  padding: 8px;
  background: #f5f5f5;
  cursor: move;
}

.content {
  padding: 16px;
}
</style>

使用 Vue 指令实现拖拽

可以封装一个自定义指令来实现拖拽功能，使代码更简洁和可复用。

<template>
  <div v-draggable class="floating-window">
    <div class="header">悬浮窗标题</div>
    <div class="content">悬浮窗内容</div>
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el) {
        el.style.position = 'fixed'
        el.style.cursor = 'move'

        let startX = 0
        let startY = 0
        let isDragging = false

        el.querySelector('.header').addEventListener('mousedown', (e) => {
          isDragging = true
          startX = e.clientX - el.offsetLeft
          startY = e.clientY - el.offsetTop
          document.addEventListener('mousemove', move)
          document.addEventListener('mouseup', up)
        })

        function move(e) {
          if (isDragging) {
            el.style.left = (e.clientX - startX) + 'px'
            el.style.top = (e.clientY - startY) + 'px'
          }
        }

        function up() {
          isDragging = false
          document.removeEventListener('mousemove', move)
          document.removeEventListener('mouseup', up)
        }
      }
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以使用专门的拖拽库如 vue-draggable 或 vuedraggable。

安装 vuedraggable：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="position" :options="{ handle: '.header' }">
    <div class="floating-window">
      <div class="header">悬浮窗标题</div>
      <div class="content">悬浮窗内容</div>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      position: { x: 100, y: 100 }
    }
  }
}
</script>

添加关闭和最小化功能

为悬浮窗添加关闭和最小化按钮，增强用户体验。

<template>
  <div class="floating-window" :style="{ top: top + 'px', left: left + 'px' }" v-show="!isMinimized">
    <div class="header" @mousedown="startDrag">
      悬浮窗标题
      <button @click="close">×</button>
      <button @click="toggleMinimize">-</button>
    </div>
    <div class="content">
      悬浮窗内容
    </div>
  </div>
  <div class="minimized" v-show="isMinimized" @click="toggleMinimize">
    悬浮窗（点击恢复）
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 100,
      left: 100,
      isDragging: false,
      startX: 0,
      startY: 0,
      isMinimized: false
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    toggleMinimize() {
      this.isMinimized = !this.isMinimized
    },
    // ...其他方法同上
  }
}
</script>

<style>
.minimized {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>

以上方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的实现方式。