vue监听父组件滚动条滚动_适用于PC的Vue.js滚动条组件

最新推荐文章于 2023-01-03 14:19:22 发布

cuk5239

最新推荐文章于 2023-01-03 14:19:22 发布

阅读量384

点赞数

文章标签： vue js java python npm ViewUI

原文链接：https://vuejsexamples.com/a-vuejs-scrollbar-component-for-pc/

版权

vue监听父组件滚动条滚动

实时滚动条 (vue-scrollbar-live)

pkg.module supported, which means that you can apply tree-shaking in you project

支持pkg.module，这意味着您可以在项目中应用摇树

A vue scrollbar component, support SSR.

Vue滚动条组件，支持SSR。

View Demo 查看演示 View Github 查看Github

运行示例 (Run Example)

Your can see the usage by run the example of the module, here is the step:

您可以通过运行模块示例来查看用法，这是步骤：

Clone the library git clone https://github.com/livelybone/vue-scrollbar-live.git
克隆库git clone https://github.com/livelybone/vue-scrollbar-live.git
Go to the directory cd vue-scrollbar-live
进入目录cd vue-scrollbar-live
Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
安装npm依赖项npm i (使用淘宝注册中心： npm i --registry=http://registry.npm.taobao.org )
Open service npm run dev
打开服务npm run dev
See the example(usually is http://127.0.0.1/examples/test.html) in your browser
在浏览器中查看示例(通常为http://127.0.0.1/examples/test.html )

安装 (Installation)

npm i -S vue-scrollbar-live

全球名称 (Global name)

VueScrollbar

用法 (Usage)

import VueScrollbar from 'vue-scrollbar-live';

// 引入css
import 'vue-scrollbar-live/lib/css/index.css';

// Global register
Vue.component('scrollbar', VueScrollbar);

// Local register
new Vue({
  components:{VueScrollbar}
})

when you want to set this module as external while you are developing another module, you should import it like this:

当您要在开发另一个模块时将此模块设置为外部模块时，应按以下方式导入它：

import * as VueScrollbar  from 'vue-scrollbar-live'

// then use it by need

Use in html, see what your can use in CDN: unpkg

在html中使用，查看可以在CDN中使用的内容：unpkg

<-- use what you want -->
<script src="https://unpkg.com/vue-scrollbar-live/lib/umd/<--module-->.js"></script>

接口 (Interface)

See in index.d.ts

参见index.d.ts

道具 (Props)

Name	Type	DefaultValue	Description
`isMobile`	`Boolean`	`false`	Mark the device that component be used
`maxHeight`	`[String, Number]`	none	Used to set style max-height of the wrap `.scrollbar-wrap`.$/
`scrollTo`	`[Number, Object]`	`0`	Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/
`marginToWrap`	`Number`	`0`	Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/

名称	类型	默认值	描述
`isMobile`	`Boolean`	`false`	标记要使用组件的设备
`maxHeight`	`[String, Number]`	没有	用于设置包装的最大高度`.scrollbar-wrap` 。$ /
`scrollTo`	`[Number, Object]`	`0`	用于设置内容包装`.scrollbar-content`滚动y。价值： `0 ~ 1` $ /
`marginToWrap`	`Number`	`0`	用于设置内容包装`.scrollbar-content`滚动y。价值： `0 ~ 1` $ /

大事记 (Events)

Name	EmittedData	Description
`wrapClick`	`event`	`click` event of the wrap
`reachBottom`	none	Triggered when the scrollbar reach the bottom
`reachTop`	none	Triggered when the scrollbar reach the top
`reachLeft`	none	Triggered when the scrollbar reach the left
`reachRight`	none	Triggered when the scrollbar reach the right
`startDrag`	`Object`	Drag start event of the scrollbar
`endDrag`	`Object`	Drag end event of the scrollbar

名称	发射数据	描述
`wrapClick`	`event`	包装的`click`事件
`reachBottom`	没有	滚动条到达底部时触发
`reachTop`	没有	滚动条到达顶部时触发
`reachLeft`	没有	滚动条到达左侧时触发
`reachRight`	没有	滚动条到达右侧时触发
`startDrag`	`Object`	滚动条的拖动开始事件
`endDrag`	`Object`	滚动条的拖动结束事件

样式 (style)

Since 5.0.0， you don't need to import the css file in your project

从5.0.0开始，您无需在项目中导入css文件

For rewrite style, you can copy the index.scss or index.css file, rewrite it use !important(this is necessary), and the import the file in your project

对于重写样式，可以复制index.scss或index.css文件，使用!important重写它(这是必需的)，然后将文件导入项目中

申请注意 (Attention for application)

If you put the component at a div that is display:none, the component may be will not work

如果将组件放置在display:none的div上，则组件可能无法工作

There are two solutions:

有两种解决方案：

Set opacity: 0; pointer-events: none; instead of display: none
设置opacity: 0; pointer-events: none; opacity: 0; pointer-events: none; 而不是display: none
Use v-if instead of set display: none
使用v-if代替设置display: none