巧用 ElementPlus 和 VueUse 打造出色的 Affix 固钉组件

2024-01-16 16:48:41

让我们踏上探索 ElementPlus Affix 固钉组件之旅！

前言

在构建现代网页时，我们经常需要元素在页面滚动时保持固定位置，这不仅能提高交互性，还让用户更容易访问重要信息。ElementPlus 中的 Affix 组件就是为此而生的，它可以轻松实现元素的固定效果，让我们一起看看它的强大之处吧！

组件实现

准备工作

首先，我们先将 ElementPlus 集成到 Vue 项目中，您可以在命令行中运行以下命令：

npm install element-plus -S

接下来，在你的项目中引入 ElementPlus 和 VueUse 库：

import { Affix, Spin } from 'element-plus'
import { useElementSize } from '@vueuse/core'

实现步骤

引入组件并定义数据

export default {
  components: { Affix, Spin },
  setup() {
    const affixRef = ref(null)
    const size = useElementSize(affixRef)

    return { affixRef, size }
  },
}

使用 Affix 组件

<Affix :target="affixRef">
  <Spin size="large" />
</Affix>

利用 v-if 实现条件渲染

<div v-if="size.height">
  固定元素的位置
</div>

响应式控制固钉元素的显隐

<div v-if="size.height && affixRef.value.getBoundingClientRect().top < 0">
  固定元素的位置
</div>

代码示例

为了让您对 Affix 固钉组件的实现有更清晰的了解，我们提供了完整的代码示例：

<template>
  <div>
    <Affix :target="affixRef">
      <Spin size="large" />
    </Affix>

    <div v-if="size.height">
      固定元素的位置
    </div>

    <div v-if="size.height && affixRef.value.getBoundingClientRect().top < 0">
      固定元素的位置
    </div>
  </div>
</template>

<script>
import { Affix, Spin } from 'element-plus'
import { useElementSize } from '@vueuse/core'

export default {
  components: { Affix, Spin },
  setup() {
    const affixRef = ref(null)
    const size = useElementSize(affixRef)

    return { affixRef, size }
  },
}
</script>