更新记录

1.0.0(2020-06-22)

第一版本,有问题请及时指出。感谢大家的使用!想用小程序原生的可以去小程序插件里搜索同名插件即可。


平台兼容性

插件安装

数字输入框组件 待更多功能更新

导入

将组件文件放在项目的compoments里, import numSelect from '../../components/numSelect/numSelect.vue',即可!


*注意 修改width时 可以使用一个块级元素包裹起来 因为内部插件是100%宽度

using:

属性 attribute

属性名 值类型 说明 可选值说明 默认值
value Number 用于赋值
name String 和原生一样的name属性 用于表单
min Number 最小值 不做限制则传入null 默认为0 0
max Number 最大值 不做限制则传入null 100
disable boolean 是否禁用 false
color String 风格颜色 输入颜色代码即可 #ea5a59
model String 风格类型 默认为1 一共5种 1 、2、3、4、5 1
input Boolean 允许输入 false
size String 尺寸大小 单位rpx 40
step Number 步长每次加减的基础值,可以是小数 1

方法 method

  • getValue > 获取某个组件的值,每次加减都会得到 例:@getValue="getValue"

用法提示,如果有很多个组件,建议使用表单提交一次获取所有的值一起提交。

示范代码

wxml

    <view class="container">
        <view>
            <label>宽度30%-风格1-默认尺寸-值3-默认颜色</label>
            <view style="width: 30%;">
                <numSelect model="1" :value="3"></numSelect>
            </view>
        </view>

        <view>
            <label>宽度30%-风格1-默认尺寸-默认颜色-禁用</label>
            <view style="width: 30%;">
                <numSelect model="1" disable></numSelect>
            </view>
        </view>

        <view>
            <label>宽度40%-风格2-默认尺寸-颜色#6fb1f9</label>
            <view style="width: 40%;">
                <numSelect model="2" color="#6fb1f9" @getValue="getValue"></numSelect>
            </view>
            <label>选择的值:{{value}}</label>
        </view>

        <view>
            <label>宽度45%-风格3-尺寸45-颜色#16c2c2</label>
            <view style="width: 45%;">
                <numSelect model="3" size="45" color="#16c2c2"></numSelect>
            </view>
        </view>

        <view>
            <label>宽度60%-风格4-尺寸30-颜色#9266f9</label>
            <view style="width: 60%;">
                <numSelect model="4" size="30" color="#9266f9" :step="0.03"></numSelect>
            </view>
        </view>

        <view>
            <label>宽度60%-风格4-尺寸30-颜色#9266f9-禁用</label>
            <view style="width: 60%;">
                <numSelect model="4" size="30" disable color="#9266f9"></numSelect>
            </view>
        </view>

        <view>
            <label>宽度50%-风格5-尺寸45-颜色#aaaa00</label>
            <view style="width: 50%;">
                <numSelect model="5" size="45" color="#aaaa00"></numSelect>
            </view>
        </view>
    </view>
</template>

<script>
    import numSelect from '../../components/numSelect/numSelect.vue'
    export default {
        components: {
            numSelect
        },
        data() {
            return {
                value:null
            }
        },
        methods: {
            getValue(e){
                this.value =e;
            }
        }
    }
</script>

<style>
    .container>view {
        margin: 30rpx auto;
        text-align: center;
    }

    .container>view>view {
        margin: 10rpx auto;
    }

    .container>view>label {
        font-size: 24rpx;
        color: #5f5d5d;
    }
</style>
发现问题请及时在评论区给我反馈,谢谢大家的指正,如果好用请给个好评哦~

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问