v-scrollbar
Vue-based component, an adaptive scroll bar that displays a scroll bar when the child element's content exceeds the parent scroll bar (基于vue的组件,自适应的滚动条,当子元素的内容超出父级滚动条就会显示滚动条)
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Install
npm install v-scrollbar --save-dev
import scrollbar from 'v-scrollbar';
Vue.component('my-component', {
components: {
scrollbar
}
});
Props
Props |
Tpye |
Default |
Description |
changeTop |
Number |
Null |
change scroll bar position about top (双向绑定顶部的偏移量) |
changeLeft |
Number |
Null |
change scroll bar position about letf (双向绑定左侧部的偏移量) |
timeOut |
Number |
0 |
Animation time for subcomponents (如果该组件内有动画会影响这个组件的功能,所有请传入该动画的结束) |
Usage
<div>
<scrollbar @top="top" @bottom="bottom" @left="left" @right="right" :istime="istime" :changeTop.sync="changeTop" :changeLeft.sync="changeLeft">HTML(滚动的内容)</scrollbar>
<div>
Events
The callback function at the border
Event |
Output |
Description |
top |
Function |
When the scroll bar is on the topmost side (当滚动条到顶部时的回调) |
bottom |
Function |
When the scroll bar is on the bottommost side (当滚动条到底部时的回调) |
left |
Function |
When the scroll bar is on the leftmost side (当滚动条到最左边时的回调) |
right |
Function |
When the scroll bar is on the rightmost side (当滚动条到最右边时的回调) |