tm-stepper 步进器
🎉目录导航
👉使用方法,跟数1,2,3一样简单
温馨提示1.2.24
长按加减按钮，可以持续增加或者减少数字。
完整示例
<template>
<tm-fullView>
<template v-slot:default="{info}">
<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
<tm-menubars title="步进器" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet :shadow="24">
<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''" >基础示例</view>
<tm-stepper width="260" v-model="word2"></tm-stepper>
</tm-sheet>
<tm-sheet :shadow="24">
<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''" >步幅以及高度的设置</view>
<tm-stepper height="80" v-model="word" :step="10" color="bg-gradient-pink-accent"></tm-stepper>
</tm-sheet>
<tm-sheet :shadow="24">
<tm-stepper width="300" v-model="word" :step="10" color="blue" :round="24"></tm-stepper>
<tm-stepper v-model="word" :step="10" color="bg-gradient-blue-accent" :round="24"></tm-stepper>
</tm-sheet>
<view style="height: 50upx;"></view>
</view>
</template>
</tm-fullView>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
import tmStepper from "@/tm-vuetify/components/tm-stepper/tm-stepper.vue"
export default {
components:{tmFullView,tmMenubars,tmSheet,tmStepper},
data() {
return {
word2:0,
word:0
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| black | Boolean | true/false | false | 暗黑模式 |
| disabled | Boolean | true/false | false | 是否禁用 |
| color | String | 任意主题色名称 | primary | 主题色 |
| font-color | String | 任意主题色名称 | black | 输入框的文字主题色 |
| step | Number | 任意数字 | 1 | 步幅 |
| value | Number | 任意数字 | 0 | 推荐使用value.sync或者v-model |
| round | Number | 任意数字0-25 | 3 | 圆角 |
| shadow | Number | 任意数字0-25 | 3 | 投影 |
| max1.2.24 | Number | 任意数字 | 999 | 最大值 |
| min1.2.24 | Number | 任意数字 | 0 | 最小值 |
| width1.2.24 | Number | 任意数字 | 200 | 宽度，单位rpx |
| height1.2.24 | Number | 任意数字 | 70 | 高度，单位rpx |
| name1.1.7 | String | '' | '' | 提交表单时的的字段名称标识 |
| disabledInput1.2.297 | Boolean | true/false | false | 是否禁用输入框 |
| circular1.2.297 | Boolean | true/false | false | 按钮四角是否跟随圆角 |
| fixed1.2.297 | Number | 任意数字 | NaN | 默认可任意小数，整数。如果为0表示只为整数，如果大于0表示固定小数点位数 |
| callback1.2.24 | Function | 函数 | 见下方文档 | 异步回调增减 |
关于callback函数，因为vue2.0在uniapp中属性无法赋值function类型,因此需要像下方配置回调函数
//word5为绑定的变量。
<tm-stepper :callback="callback" v-model="word5" :step="1" color="bg-gradient-pink-accent"></tm-stepper>
//callback为上方属性中的异步回调函数。
callback(){
return new Promise((res,rej)=>{
//1秒后返回操作的结果，是否执行增减操作。
setTimeout(function(){
res(true);//true,表示增减成功。
//res(fale);//fale，表示增减失败，不会执行步进器的操作。
},1000)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | 当前变量 | Number | 当值发生改变时触发 |
👉更新日志
2021年8月20日14:8:5 初始版本。