# 6.12 数值调节（Step Action）

用于通过减号和加号按步长调整数值，默认插槽可承载滑杆或数值展示内容。

# 实例

# 基础用法

<template>
  <div class="page">
    <dof-step-action v-model="temperature" :min="10" :max="35" :step="0.5" vertical="middle">
      <div class="value">
        <text>{{ temperature }}°C</text>
      </div>
    </dof-step-action>
  </div>
</template>

<script>
import { DofStepAction } from 'dolphin-intl-ui'

export default {
  components: { DofStepAction },
  data() {
    return {
      temperature: 26.5,
    }
  },
}
</script>

<style scoped>
.page {
  flex-direction: row;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.value {
  align-items: center;
}

.value text {
  color: #333333;
  font-size: 48px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# Api

# StepAction

# Props

Prop Type Required Default Description
value / v-model Number Y - 当前值
min Number N 0 最小值
max Number N 100 最大值
step Number N 1 每次加减的步长
height Number N 40 加减号图标尺寸
color String N '' 加减号图标背景色；未设置时使用当前主题默认色
vertical String N '' 加减号与默认插槽内容的垂直对齐方式：top、middle、bottom
disabled Boolean N false 是否禁用
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
icon-color String N '' 图标颜色
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

启用暗黑后使用透明字体图标，color 控制按钮底色，iconColor 控制图标颜色；sub / add 插槽优先。

# Events

事件名 说明 回调参数
add 点击加号图标时触发 -
sub 点击减号图标时触发 -
change 值变化时触发，用于 v-model 更新 value: Number

# Slots

插槽名 说明
默认插槽 加减号之间的内容区域，可放置数值、滑杆等内容
sub 自定义减号内容
add 自定义加号内容