组件名称
ux-step-box
组件图示
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
|---|
| width | String | 200rpx | 组件宽度 |
| value | Number | 0 | 默认值 |
| step | Number | 1 | 步进值 |
| maxNum | Number | 9999 | 最大值 |
minNum
| Number | 0 | 最小值 |
| buttonClass | Array | ['gui-step-box-button', 'gui-color-gray'] | 加减按钮样式 |
| inputClass | Array | ['gui-step-box-input','gui-border-radius'] | 输入框样式 |
| disabled | Boolean | false | 输入框是否禁用 |
| index | Number | 0 | 组件索引值，通过 change 事件携带回来 |
| datas | Array | null | 自定义携带数据，通过 change 事件携带回来 |
| decimal | Number | 0 | 小数位数，默认0位，代表整数 |
演示代码
<template>
<scroll-view class="ux-body ux-page-color ux-flex1">
<text class="ux-h6 ux-color-grey ux-mt-large">步进器 默认属性</text>
<view class="ux-flex ux-row ux-nowrap ux-mt-small">
<view class="ux-bg-white">
<ux-step-box @change="stepBoxChange1"></ux-step-box>
</view>
</view>
<text class="ux-h6 ux-color-grey ux-mt-large">步进器 属性配置</text>
<view class="ux-flex ux-row ux-nowrap ux-mt-small">
<view class="ux-bg-white" style="border:1px solid #3688FF; border-radius:5rpx;">
<ux-step-box
:step="0.1"
:max-num="5.2"
:min-num="4.8"
:value="5"
:decimal="2"
:buttonClass="['ux-step-box-button', 'ux-color-white', 'ux-bg-primary']"
@change="stepBoxChange2"></ux-step-box>
</view>
</view>
</scroll-view>
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
stepBoxChange1 : function(data:any[]){
console.log(data);
},
stepBoxChange2 : function(data:any[]){
console.log(data);
}
}
}
</script>
<style scoped>
</style>
