DigitRoller 数字翻滚

介绍

数字翻滚动效，支持其他自定义文本滚动。

基础用法

通过 value 属性来设置数字值。

<vd-digit-roller :value="123456" />

自定义字符

通过 chars 属性来设置自定义字符。

<vd-digit-roller value="1a2b3d4c5e" :chars="chars" />

const chars = '0123456789abcdefghijklmnopqrstuvwxyz';

最小字符长度

通过 minlength 属性来设置自定义字符长度，不足的字符数会自动向前补充。

<vd-digit-roller :value="123456" minlength="10" />

自定义样式（卡片）

展示自定义卡片样式示例。

<vd-digit-roller
  :value="123456"
  height="48"
  minlength="8"
  custom-class="custom-roller"
>
  <template #text="{ text }">
    <view class="txt">{{ text }}</view>
  </template>
</vd-digit-roller>

.custom-roller {
  color: $vd-white;
  font-size: $vd-font-size-xl;
  font-weight: bold;

  .vd-digit-roller__item {
    margin-right: $vd-gap-xs;
  }

  .vd-digit-roller__text {
    padding: $vd-gap-xs 0;

    > view {
      height: 100%;
    }
  }

  .txt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    border-radius: $vd-radius-md;
    background: $vd-primary;
  }
}

自定义样式（文字）

展示自定义卡片样式示例。

<vd-digit-roller
  :value="123456"
  height="40"
  minlength="8"
  custom-class="custom-roller"
>
  <template #text>
    <text>￥</text>
  </template>
</vd-digit-roller>

.custom-roller {
  color: $vd-white;
  font-size: $vd-font-size-xl;
  font-weight: bold;

  .vd-digit-roller__item {
    width: 30px;
    margin-right: $vd-gap-xs;
    border-radius: $vd-radius-md;
    background: $vd-primary;
  }
}

API

Props

参数	说明	类型	默认值
value	数值	string | number	-
chars	滚动字符	string	-
minlength	最小字符长度	string | number	-
duration	动画时长，单位 ms	string | number	1500
autoplay	是否自动开始动画	boolean	true
height	滚动高度	string | number	120

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
text	数字文本内容

Expose

方法名	说明	参数	返回值
start	开始滚动	-	-
reset	重置滚动	-	-