Vue 的 OverlayScrollbars

这是官方的 OverlayScrollbars Vue 包装器。

安装

npm install overlayscrollbars-vue

对等依赖

Vue 的 OverlayScrollbars 有以下对等依赖：

• 原生 JavaScript 库：overlayscrollbars

npm install overlayscrollbars

• Vue 框架：vue

npm install vue

使用方法

第一步是将 CSS 文件导入到您的应用中：

import "overlayscrollbars/overlayscrollbars.css";

注意：如果路径 'overlayscrollbars/overlayscrollbars.css' 无法使用，请使用 'overlayscrollbars/styles/overlayscrollbars.css' 作为 CSS 文件的导入路径。

组件

主要的入口是 OverlayScrollbarsComponent，可以在您的应用中作为组件使用：

import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";

// ...

<OverlayScrollbarsComponent defer>示例内容</OverlayScrollbarsComponent>;

属性

它有可选属性：

• element：接受一个 string，表示根元素的标签。
• options：接受一个 object，表示 OverlayScrollbars 的选项。
• events：接受一个 object，表示 OverlayScrollbars 的事件。
• defer：接受一个 boolean 或 object。将初始化推迟到浏览器空闲时。

注意：强烈建议在可能的情况下使用 defer 选项，将初始化推迟到浏览器的空闲期。

// 示例用法
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: "scroll" } }}
  events={{
    scroll: () => {
      /* ... */
    },
  }}
  defer
/>

事件

除了 events 属性，OverlayScrollbarsComponent 还会触发“原生” Vue 事件。为了防止与 DOM 事件名称冲突，这些事件有一个 os 前缀。

注意：无论您使用 events 属性还是 Vue 事件，或者两者都用，都是可以的。

// 示例用法
<template>
  <OverlayScrollbarsComponent
    @os-initialized="onInitialized"
    @os-updated="onUpdated"
    @os-destroyed="onDestroyed"
    @os-scroll="onScroll"
  />
</template>

Ref

OverlayScrollbarsComponent 的 ref 将为您提供一个对象，您可以通过它访问 OverlayScrollbars 的 instance 和组件的根 element。 ref 对象有两个属性：

• osInstance：一个返回 OverlayScrollbars 实例的函数。
• getElement：一个返回根元素的函数。

组合式函数

如果 OverlayScrollbarsComponent 不够用，您还可以使用 useOverlayScrollbars 组合式函数：

import { useOverlayScrollbars } from "overlayscrollbars-vue";

// 示例用法
const Component = {
  setup() {
    const div = ref(null);
    const reactiveParams = reactive({ options, events, defer });
    const [initialize, instance] = useOverlayScrollbars(reactiveParams);

    /**
     * 或者：
     *
     * const params = ref();
     * const [initialize, instance] = useOverlayScrollbars(params);
     *
     * 或者：
     *
     * const options = ref();
     * const events = ref();
     * const defer = ref();
     * const [initialize, instance] = useOverlayScrollbars({
     *   options,
     *   events,
     *   defer,
     * });
     *
     */

    onMounted(() => {
      initialize({ target: div.value });
    });

    return () => <div ref={div} />;
  },
};

可组合用于高级用法，让您可以控制整个初始化过程。如果您想将其与其他插件集成，这将非常有用。

如果组件卸载，可组合将自动销毁实例。

参数

参数是可选的，类似于 OverlayScrollbarsComponent。 它是一个具有可选属性的 object：

• options：接受一个 object，表示 OverlayScrollbars 的选项。
• events：接受一个 object，表示 OverlayScrollbars 的事件。
• defer：接受一个 boolean 或 object。将初始化推迟到浏览器空闲时。

注意：该对象可以是普通的、reactive 或 ref 对象。这也适用于所有字段。

返回值

useOverlayScrollbars 可组合返回一个包含两个值的 tuple：

• 第一个值是 initialization 函数，它接受一个参数，即 InitializationTarget。
• 第二个值是一个函数，返回当前的 OverlayScrollbars 实例，如果未初始化则返回 null。

许可证

MIT