@@ -78,21 +78,21 @@ export default {
7878
7979### 自定义属性
8080
81- | 属性名 | 类型 | 默认值 | 描述 |
82- | ------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------- |
83- | id | String | 随机数 | 一个唯一的ID,可以不填 |
84- | width | Number,String | 100% | 容器宽度,默认贴合父级(父级需要有宽度),也可自己设置,接受合法的CSS值,传数字会转换成px |
85- | height | Number,String | 100% | 容器高度,默认贴合父级(父级需要有高度),也可自己设置,接受合法的CSS值,传数字会转换成px |
86- | breadth | Number | 6 | 滑块的粗细,单位: px |
87- | thumbColor | String | #7f7f7f | 滑块的颜色,接受 CSS 颜色值 |
88- | trackColor | String | transparent | 轨道的颜色,接受 CSS 颜色值 |
89- | autoHide | Boolean | true | 是否自动隐藏滚动条,鼠标在区域内才显示 |
90- | left | Boolean | false | 是否把垂直滚动条放在容器的左边 |
91- | top | Boolean | false | 是否把水平滚动条放在容器的顶端 |
92- | noVer | Boolean | false | 是否禁用垂直滚动条(overflow-y: hidden ) |
93- | noHor | Boolean | false | 是否禁用水平滚动条(overflow-x: hidden ) |
94- | minLength | Number | 20 | 当内容无限多的时候,滑块最短不得低于此值,单位: px |
95- | resizeObject | Boolean | false | 如果存在监听不到内容高度变化的情况可以把这个值改为true试试,(nuxt.js打包后发现有这种情况 ) |
81+ | 属性名 | 类型 | 默认值 | 描述 |
82+ | ------------ | ------------- | ----------- | -------------------------------------------------------------------------------------------------- |
83+ | id | String | 随机数 | 一个唯一的ID,可以不填 |
84+ | width | Number,String | 100% | 容器宽度,默认贴合父级(父级需要有宽度),也可自己设置,接受合法的CSS值,传数字会转换成px |
85+ | height | Number,String | 100% | 容器高度,默认贴合父级(父级需要有高度),也可自己设置,接受合法的CSS值,传数字会转换成px |
86+ | breadth | Number | 6 | 滑块的粗细,单位: px |
87+ | thumbColor | String | #7f7f7f | 滑块的颜色,接受 CSS 颜色值 |
88+ | trackColor | String | transparent | 轨道的颜色,接受 CSS 颜色值 |
89+ | autoHide | Boolean | true | 是否自动隐藏滚动条,鼠标在区域内才显示 |
90+ | left | Boolean | false | 是否把垂直滚动条放在容器的左边 |
91+ | top | Boolean | false | 是否把水平滚动条放在容器的顶端 |
92+ | noVer | Boolean | false | 是否禁用垂直滚动条(overflow-y: hidden ) |
93+ | noHor | Boolean | false | 是否禁用水平滚动条(overflow-x: hidden ) |
94+ | minLength | Number | 20 | 当内容无限多的时候,滑块最短不得低于此值,单位: px |
95+ | resizeObject | Boolean | false | 如果存在监听不到内容高度变化的情况可以把这个值改为true试试,(nuxt.js打包后firefox发现有这种情况 ) |
9696
9797### 自定义事件
9898
@@ -154,7 +154,7 @@ export default {
154154
155155如何使用自身方法:
156156
157- ``` js
157+ ``` vue
158158 <template>
159159 <!-- 需要定义一个ref -->
160160 <Ohyeah ref="oh1">
@@ -201,7 +201,7 @@ export default {
201201 <!-- 若不设置ohyeah的width和height, 则需要一个具有高度和宽度的容器来包裹ohyeah -->
202202 <div style="height:100vh; width:50%;">
203203 <Ohyeah>
204- <p v-for="(item,index) in data " :key="index">{{index}}</p>
204+ <p v-for="(item,index) in testData " :key="index">{{index}}</p>
205205 </Ohyeah>
206206 </div>
207207 </template>
@@ -211,7 +211,7 @@ export default {
211211 export default {
212212 data(){
213213 return {
214- data : new Array(100).fill("")
214+ testData : new Array(100).fill("")
215215 }
216216 }
217217 components:{
@@ -225,9 +225,6 @@ export default {
225225
2262261 .
227227> ** scrollTo(x,y,isSmooth)** 方法<br />
228- > x number 为要水平滚动到的目标位置,单位px<br />
229- > y number 为要垂直滚动到的目标位置,单位px<br />
230- > isSmooth boolean 是否需要平滑滚动<br />
231228> 平滑滚动使用的是` scroll-behavior: smooth; ` ,目前` chrome ` ,` firefox ` ,` opera ` 支持<br />
232229> ** 但是** :浏览器水平滚动条和垂直滚动条是互斥的,当水平正在滚时,垂直滚不动,反之亦然。浏览器始终只会有一个方向处于滚动中<br />
233230> ** 所以** :如果设置了` isSmooth ` 为` true ` ,那么不要同时设置x和y,至少有一个应该为` null ` <br />
0 commit comments