dk-plus

简体中文

English

简体中文

English

Appearance

目录

scrollBar 滚动条 ​

滚动条组件

基础使用 ​

height 设置滚动区域高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html
<template>
  <dk-scrollbar height="200px">
    <div class="item" v-for="item in 20" :key="item">{{item}}</div>
  </dk-scrollbar>
</template>
<style lang="scss" scoped>
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: rgba($color: #1cb1a4, $alpha: 0.5);
    color: #fff;
  }
</style>
展开

横向滚动 ​

元素宽度大于滚动区域宽度时，滚动条会自动出现横向滚动条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html
<template>
  <dk-scrollbar height="200px">
    <div class="content">
      <div class="item" v-for="item in 20" :key="item">{{item}}</div>
    </div>
  </dk-scrollbar>
</template>
<style lang="scss" scoped>
  .content {
    width: fit-content;
    display: flex;
    .item {
      width: 50px;
      height: 50px;
      display: flex;
      margin: 10px;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 4px;
      background: rgba($color: #1cb1a4, $alpha: 0.5);
      color: #fff;
    }
  }
</style>
展开

v-dk-scroll 指令 ​

设置 v-dk-scroll 指令也可以实现滚动样式， 属性和组件相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html
<template>
  <div v-dk-scroll="true" height="200px">
    <div class="item" v-for="item in 20" :key="item">{{item}}</div>
  </div>
</template>
<style lang="scss" scoped>
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: rgba($color: #1cb1a4, $alpha: 0.5);
    color: #fff;
  }
</style>
展开

属性 ​

参数说明类型可选值默认值
height滚动区域高度string--
width滚动区域宽度string--
bar-width滚动条宽度string-6px
track-color滚动条轨道颜色string-transparent
thumb-color滚动条滑块颜色string-#c1c1c1
thumb-radius滚动条滑块圆角string-4px
v-dk-scroll指令boolean-false

Slots 插槽 ​

name说明
default滚动区域内容

事件 ​

事件名称说明回调参数
scroll滚动条滚动时触发({ scrollTop: number, scrollTop: number}): => void

Contributors ​