1.0.9 • Published 7 years ago
vue-scrollbar-custom v1.0.9
什么是vue-scrollbar-custom?
vue自定义垂直滚动条样式组件,适用于PC端
DEMO
GITHUB
安装与引用
npm安装
npm install vue-scrollbar-custom --save-dev
局部引用
import vScrollbar from 'vue-scrollbar-custom'
export default {
name: 'app',
components: {
vScrollbar
}
}
全局引用(在main.js中)
import vScrollbar from 'vue-scrollbar-custom'
Vue.component('v-scrollbar', vScrollbar)
开始使用
参数
props: {
isTopBar: { // 是否为顶部滚动条
type: Boolean,
default: false
},
isHideBar: { // 是否在鼠标不在滚动区域时隐藏滚动条
type: Boolean,
default: false
},
barContainerStyle: { // 滚动条容器样式对象
type: Object,
default: function () {
return {
width: '8px',
}
}
},
barStyle: { // 容器内滚动条样式对象
type: Object,
default: function () {
return {
width: '6px',
borderRadius: this.isHideBar ? '3px' : '',
background: '#ccc'
}
}
},
topBarStyle: { // 顶部滚动条样式对象(一般只设置高度和背景色)
type: Object,
default: function () {
return {
height: '3px',
backgroundColor: '#17ce28'
}
}
}
},
注意
isTopBar 和 isHideBar 不能同时为true
slot
slot | header 2 |
---|---|
默认slot | 默认插值位置是内容容器内 |
slot(name="barIn") | 滚动条元素内 |
slot(name="topBarIn") | 顶部滚动条元素内 |
事件
scroll事件
因为只通过特殊布局隐藏了滚动条而已,所以scroll事件其实就是原生的scroll事件
html
<v-scrollbar class="vScrollbar1" @scroll="scrollFn">
<h1 v-for="n in 30">default</h1>
</v-scrollbar>
methods
scrollFn(e) {
console.log(e.target.className)
console.log(e.target.scrollTop)
}