银商小程序

UmsInputNumber

属性

属性名 类型 默认值 说明
type String small inputNumber的大小：small,large
value Number 0 初始值
step Number 1 点一下的增值
max Number Infinity 最大值
min Number -Infinity 最小值
disabled Boolean false 禁用状态

事件

事件名 参数 说明
input value input事件会上传输入的值

功能

支持长按和单击

代码示例

<template>
    <div>
        <ums-header title="InputNumber" :right="false" leftPartText="返回" @onLeftPartClick="back"></ums-header>
        <div class="main">
            <scroller style="margin-top:10px;">
                <text class="title">上下限1~10的计数器</text>
                <input-number class="inp" :value="1" :max="10" :min="1"></input-number>
                <text class="title">增减全部禁用的计数器</text>
                <input-number class="inp" :disabled="true"></input-number>
                <text class="title">自定义增减幅度的计数器</text>
                <input-number class="inp" :step="10"></input-number>
                <text class="title">不同尺寸的计数器</text>
                <input-number :value="3" class="inp" type="small" @input="getData"></input-number>
                <input-number :value="3" class="inp" type="large"></input-number>
            </scroller>
        </div>
    </div>
</template>

<script>
    import {UmsInputNumber,UmsHeader} from 'ums-comp'
    var navigator = weex.requireModule('navigator');
    export default{
        data(){
            return {

            }
        },
        components:{
            inputNumber: UmsInputNumber,
            UmsHeader
        },
        methods:{
            back(){
                navigator.pop()
            },
            getDate(value){
                console.log(value)
            }
        }
    }
</script>

<style scoped>
    .title{
        margin-top:60px;
    }
    .inp{
        margin-top: 40px;
    }
    .main{
        justify-content: center;
        align-items: center;
    }
</style>

效果展示

An image

← UmsCheckList →