Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

步进器 TmNavbar

可整数,小数

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">步进器 Stepper</tm-text>
            <tm-text color="#999999">可整数,小数步进</tm-text>
        </tm-sheet>

        <tm-sheet class="flex fletm-row">
            <tm-stepper width="220"></tm-stepper>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b d-block">小数点</tm-text>
        </tm-sheet>
        <tm-sheet class="flex fletm-row">
            <tm-stepper :decimal-len="1" :step="0.1" width="220"></tm-stepper>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b d-block">圆角类型</tm-text>
        </tm-sheet>
        <tm-sheet class="flex fletm-row">
            <tm-stepper :splitBtn="true" :model-value="50" width="220"></tm-stepper>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b d-block">更换颜色</tm-text>
        </tm-sheet>
        <tm-sheet class="flex fletm-row">
            <tm-stepper darkBtnColor="primary" btn-color="primary" btn-font-color="white" font-color="primary"
                :splitBtn="true" :model-value="10" width="220"></tm-stepper>
        </tm-sheet>



    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
</script>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
modelValuenumber0当前值,可v-model
maxnumber100最大值
widthstring"auto"组件宽
minnumber0最小值
disabledbooleanfalse是否禁用
stepnumber1步进值
decimalLennumber0如果进步值是小数位需要设置此值
btnColorstring"info"按钮的颜色
darkBtnColorstring""按钮的暗黑颜色空值读取全局的Input暗黑背景色
bgColorstring"info"输入框的背景色
darkBgColorstring""输入框的暗黑背景色空值读取全局的Input暗黑背景色
btnWidthstring"64"按钮的宽
heightstring"64"输入框及按钮的高
roundstring"8"按钮的圆角。
splitBtnbooleanfalse是否按钮与输入框独立开来不和输入框粘一起。
btnFontColorstring"#333333"按钮文本颜色,暗黑时取白色
fontColorstring"#333333"文本颜色,暗黑时取白色
fontSizestring"28"文本文字大小

🌹 事件

事件名参数返回数据描述
change名称:str,当前的值。,-输入值或者点击按钮时触发
update:modelValue--等同vmodel

🌽 slot插槽

插槽名数据描述

🥗 ref方法

方法名参数返回值描述