表单组件
步进器 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>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
modelValue | number | 0 | 当前值,可v-model |
max | number | 100 | 最大值 |
width | string | "auto" | 组件宽 |
min | number | 0 | 最小值 |
disabled | boolean | false | 是否禁用 |
step | number | 1 | 步进值 |
decimalLen | number | 0 | 如果进步值是小数位需要设置此值 |
btnColor | string | "info" | 按钮的颜色 |
darkBtnColor | string | "" | 按钮的暗黑颜色空值读取全局的Input暗黑背景色 |
bgColor | string | "info" | 输入框的背景色 |
darkBgColor | string | "" | 输入框的暗黑背景色空值读取全局的Input暗黑背景色 |
btnWidth | string | "64" | 按钮的宽 |
height | string | "64" | 输入框及按钮的高 |
round | string | "8" | 按钮的圆角。 |
splitBtn | boolean | false | 是否按钮与输入框独立开来不和输入框粘一起。 |
btnFontColor | string | "#333333" | 按钮文本颜色,暗黑时取白色 |
fontColor | string | "#333333" | 文本颜色,暗黑时取白色 |
fontSize | string | "28" | 文本文字大小 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
change | 名称:str,当前的值。, | - | 输入值或者点击按钮时触发 |
update:modelValue | - | - | 等同vmodel |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|