vue实现悬浮列表

Vue 实现悬浮列表的方法

使用 CSS 固定定位

通过 CSS 的 position: fixed 属性实现悬浮效果。在 Vue 模板中，为列表容器添加固定定位样式，并设置 top、left 等属性控制位置。

<template>
  <div class="floating-list" :style="{ top: `${positionY}px`, left: `${positionX}px` }">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<style>
.floating-list {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
</style>

动态控制悬浮显示/隐藏

通过 Vue 的 v-show 或 v-if 指令，结合鼠标事件动态控制悬浮列表的显示与隐藏。例如，在鼠标移入某个元素时显示列表，移出时隐藏。

<template>
  <div @mouseenter="showList = true" @mouseleave="showList = false">
    <p>悬停区域</p>
    <div class="floating-list" v-show="showList">
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.text }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      list: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' }
      ]
    };
  }
};
</script>

结合滚动事件动态调整位置

监听页面滚动事件，动态更新悬浮列表的位置，确保其始终固定在目标区域。使用 window.addEventListener 实现滚动监听。

<template>
  <div class="floating-list" :style="{ top: `${scrollY + offsetY}px` }">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollY: 0,
      offsetY: 100,
      list: [...]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
    }
  }
};
</script>

使用第三方库（如 Vue-Draggable）

如果需要实现可拖拽的悬浮列表，可以引入 vue-draggable 库。通过拖拽功能，用户可以自由调整悬浮列表的位置。

<template>
  <draggable v-model="list" class="floating-list" :style="{ position: 'fixed' }">
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: [...]
    };
  }
};
</script>

响应式悬浮列表

结合 Vue 的响应式特性，动态更新悬浮列表的内容或样式。例如，根据屏幕宽度调整悬浮列表的宽度或位置。

<template>
  <div class="floating-list" :class="{ 'mobile-view': isMobile }">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      list: [...]
    };
  },
  mounted() {
    this.checkScreenWidth();
    window.addEventListener('resize', this.checkScreenWidth);
  },
  methods: {
    checkScreenWidth() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>

<style>
.floating-list.mobile-view {
  width: 90%;
  left: 5%;
}
</style>