Nuxt 滚动栏

Vue 3 的 Nuxt 包装器

概览

这是Nuxt 3包装 Vue 3 完美滚动栏 (转而包装) 完美滚动栏) (中文(简体) ).

它是一个相当简单的插件,但从设置服务器和客户端内容,附加事件处理器,以及导入样式中抽出麻烦.

关于包裹/ 替代包的注释

两者 vue3- 完美- 滚动栏 财务报告和审定财务报表 完美滚动栏 似乎有点僵了 所以我觉得把图书馆包起来比较容易 命名空格软件包 宁可多待一天 几天公关.

注意还有 nuxt- 完美- 滚动栏 并且缺乏源代码.

演示

要查看 StackBlitz 上的演示:

• https://stackblitz.com/github/davestewart/nuxt-scrollbar?file=播放地%2Fapp.vue 页面存档备份,存于互联网档案馆

要在当地运行演示 :

npm run dev

快速设置

安装 :

npm install --save @davestewart/nuxt-scrollbar

配置 :

export default defineNuxtConfig({
  modules: [
    '@davestewart/nuxt-scrollbar'
  ],
})

使用量

标记

使用带有可选属性的滚动条的基本示例 :

<template>
  <NuxtScrollbar tag="aside" @ps-scroll-y="onScroll">
    <!-- your content -->
  </NuxtScrollbar>
</template>

<script setup>
function onScroll (event) {
  console.log(event)
}
</script>

说明:

• 您需要设置滚动条高度来滚动 !
• 自动导入滚动条样式

选项和活动

Vue 3 完美滚动栏选项 :

• https://github.com/mercs600/vue3-perfect-scrollbar#全球选择

完美的滚动栏选项和事件 :

• https://perfectscrollbar.com (中文(简体) )

发展

为开发该模块:

# develop the module using the demo
npm run dev

# build and release (make sure to update version and changelog first)
npm run release