vue实现固定位置显示功能

下面是详细讲解“Vue实现固定位置显示功能”的完整攻略：

1. 前言

在使用 Vue.js 开发页面时，常常会遇到需要固定某个节点位置的需求，常见的应用场景有如下几种：

• 在滚动页面时，需要固定某个顶部导航栏或侧边栏；
• 实现类似于弹出框的固定弹窗，钉在页面的某个位置，不受滚动页面的影响；
• 在轮播图等场景下，需要固定某个位置的图标按钮。

本篇攻略将会介绍主流的 Vue 实现固定位置显示功能的几种方法。

2. 实现方法

2.1 CSS 实现

在 CSS 中，我们可以使用 position: fixed 属性来实现元素的固定定位。当一个元素被设置为 fixed 时，它将被从文档流中移除，并且相对于浏览器窗口进行定位。

例如，我们需要将一个顶部导航栏固定在页面的顶部，可以先设置该导航栏相对于页面顶部的距离，然后通过 position: fixed 属性来实现固定即可：

/* CSS */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
}

2.2 Vue 组件实现

在 Vue 中，通过编写组件的方式也可以实现固定位置显示的功能。将需要固定显示的节点封装为一个组件，然后通过 v-if 或 v-show 指令来控制该组件的显隐即可。

例如，我们需要在一个 SPA（单页面应用）中显示一个固定的侧边栏，可以编写以下组件：

<!-- Vue template -->
<template>
  <aside v-show="isShowSidebar" class="sidebar">
    <h3>Sidebar</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      isShowSidebar: false, // 是否显示侧边栏
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动事件
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll) // 移除页面滚动事件监听
  },
  methods:{
    handleScroll() {
      // 监听页面滚动，根据页面滚动位置来控制侧边栏是否显示
      if (window.scrollY >= 300) {
        this.isShowSidebar = true
      } else {
        this.isShowSidebar = false
      }
    }
  }
}
</script>

<style>
.sidebar {
  position: fixed;
  right: 30px;
  top: 150px;
  background-color: #eee;
  width: 200px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 5px #888;
}
</style>

在上例中，我们将侧边栏封装为了一个组件，该组件默认隐藏，当页面滚动距离超过 300px 时，侧边栏将呈现固定显示，随着页面继续向上滚动则自动消失。在 componentName.vue 文件中使用该组件即可。

2.3 Vue 自定义指令实现

Vue 自定义指令可以用来封装一些常用的 DOM 操作，例如实现只能输入数字、自动聚焦输入框等操作。在 Vue 中使用自定义指令也可以实现固定位置显示功能。

例如，我们需要实现一个固定在右下角的悬浮按钮，可以通过以下代码来实现：

// Vue directive
Vue.directive('fixed-btn', {
  bind(el, binding) {
    // 获取绑定值，这里默认为 right: 30px; bottom: 30px;
    const { value } = binding
    Object.keys(value).forEach((k) => {
      el.style[k] = value[k]
    })

    // 获取页面高度和宽度
    const pageHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    const pageWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

    // 计算按钮绝对定位的 left 和 top 值
    const left = el.offsetLeft - value.right + (el.offsetWidth / 2)
    const top = el.offsetTop - value.bottom + (el.offsetHeight / 2)

    // 监听页面滚动事件，实时计算按钮的位置
    window.addEventListener('scroll', () => {
      const scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
      const scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft

      el.style.position = 'absolute'
      el.style.top = scrollTop + pageHeight - value.bottom - el.offsetHeight + 'px'
      el.style.left = scrollLeft + pageWidth - value.right - el.offsetWidth + 'px'
    })
  },
  unbind(el) {
    // 移除页面滚动事件监听
    window.removeEventListener('scroll', () => {})
  },
})

在上例中，我们定义了一个名为 fixed-btn 的自定义指令，通过 bind 钩子函数来实现计算按钮固定位置并实时更新，通过 unbind 钩子函数来清除事件监听。

使用该自定义指令时，只需要在需要显示固定按钮的元素上添加 v-fixed-btn 指令并传入参数即可：

<button v-fixed-btn="{ right: 30, bottom: 30 }">固定按钮</button>

3. 总结

通过 CSS、Vue 组件、Vue 自定义指令等方式，我们可以轻松实现固定位置显示的功能。其中，CSS 实现简单直观，适用于简单的场景；Vue 组件具有良好的可维护性，可以在组件内部完整封装业务逻辑；Vue 自定义指令则可以封装常用的 DOM 操作，提高代码的重用性和可维护性。在实际应用中，选择不同的实现方式需要综合考虑业务需求、代码量、可维护性等因素。