深入理解Floating-Vue自定义组件开发-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00228/article/details/148577794

深入理解Floating-Vue自定义组件开发

floating-vue 💬 Easy tooltips, popovers, dropdown, menus... for Vue 项目地址: https://gitcode.com/gh_mirrors/fl/floating-vue

前言

在Floating-Vue项目中，自定义弹出组件(Popper)是一项高级功能，它允许开发者完全控制弹出框的行为和外观。本文将深入解析如何利用Floating-Vue提供的构建块来创建自定义Popper组件。

核心构建块解析

Floating-Vue为自定义组件开发提供了四个关键构建块：

Popper组件：核心逻辑组件，负责与popperjs库集成
PopperContent组件：标准的最小化弹出内容容器，包含必要的DOM结构和CSS类
PopperMethods混入：提供show、hide等实用方法
ThemeClass混入：根据主题计算最终的根CSS类

Popper组件详解

关键属性

theme：当前应用的主题
targetNodes：返回触发Popper的目标HTML元素的函数
referenceNode：返回用作PopperJS定位参考的HTML元素的函数
popperNode：返回Popper内容HTML元素的函数（建议指向<PopperContent>根元素）

插槽暴露的属性

Popper组件向默认插槽暴露了丰富的状态和方法：

| 属性 | 类型 | 说明 | |------|------|------| | popperId | String | 唯一ID，用于无障碍访问 | | isShown | Boolean | 指示Popper是否显示 | | shouldMountContent | Boolean | 指示是否应挂载内容 | | skipTransition | Boolean | 是否跳过动画过渡 | | autoHide | Boolean | 是否启用自动隐藏 | | hide | Function | 隐藏Popper的方法 | | handleResize | Boolean | 是否启用尺寸变化检测 | | onResize | Function | 处理内容尺寸变化的方法 | | classes | Object | 控制CSS类的布尔标志对象 | | result | Object | Popper定位计算结果 |

PopperContent组件详解

关键属性

PopperContent组件需要接收从Popper组件传递下来的所有状态属性：

popperId
theme
shown
mounted
skipTransition
autoHide
handleResize
classes
result

事件处理

hide：当需要隐藏Popper时触发
resize：当内容尺寸变化时触发

关键引用

$refs.arrow：指向箭头元素
$refs.inner：指向应用主要样式的内部div

实战：构建自定义Popper组件

下面是一个完整的自定义Popper组件实现示例：

<template>
  <Popper
    ref="popper"
    v-slot="{
      popperId,
      isShown,
      shouldMountContent,
      skipTransition,
      autoHide,
      hide,
      handleResize,
      onResize,
      classes,
      result,
    }"
    v-bind="$attrs"
    :theme="theme"
    :target-nodes="getTargetNodes"
    :reference-node="() => $refs.reference"
    :popper-node="() => $refs.popperContent.$el"
  >
    <div
      ref="reference"
      class="v-popper"
      :class="[
        themeClass,
        {
          'v-popper--shown': isShown,
        },
      ]"
    >
      <slot />

      <PopperContent
        ref="popperContent"
        :popper-id="popperId"
        :theme="theme"
        :shown="isShown"
        :mounted="shouldMountContent"
        :skip-transition="skipTransition"
        :auto-hide="autoHide"
        :handle-resize="handleResize"
        :classes="classes"
        :result="result"
        @hide="hide"
        @resize="onResize"
      >
        <slot
          name="popper"
          :shown="isShown"
        />
      </PopperContent>
    </div>
  </Popper>
</template>

<script>
import {
  Popper,
  PopperContent,
  PopperMethods,
  ThemeClass
} from 'floating-vue'

export default {
  name: 'VPopperWrapper',
  components: {
    Popper: Popper(),
    PopperContent,
  },
  mixins: [
    PopperMethods,
    ThemeClass(),
  ],
  inheritAttrs: false,
  props: {
    theme: {
      type: String,
      default () {
        return this.$options.vPopperTheme
      },
    },
  },
  methods: {
    getTargetNodes() {
      return Array.from(this.$refs.reference.children)
    },
  },
}
</script>