更新记录

1.0.1（2020-06-17）

新增尺寸属性，完全自定义的尺寸。 新增步长属性，可以自定义加减的基数。 新增小数点类型。

1.0.0（2020-06-16）

第一个版本。可能有些缺陷，希望大家在使用的时候可以给我反馈

平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

插件安装

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

导入

将组件文件放在项目的compoments里，在小程序需要用到组件的页面的json文件里使用 "usingComponents": {"numSelect":"/control/numSelect/numSelect"},即可！

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

using:

属性 attribute

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

方法 method

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

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

示范代码

wxml

    <text>默认风格(风格1) - 默认颜色 - 25%的宽度</text>
    <view class="w-25">
        <numSelect size="40" step="0.03"></numSelect>
    </view>

    <text>默认风格(风格1) - 默认颜色 - 40%的宽度 - 已禁用</text>
    <view class="w-40">
        <numSelect disable></numSelect>
    </view>

    <text>风格2 - #5f8a37 - 40%的宽度</text>
    <view class="w-40">
        <numSelect model="2" bind:getValue="getNum" value="10" color="#5f8a37" ></numSelect>
    </view>

    <text>风格2 - #f78989 - 50%的宽度 - 已禁用</text>
    <view class="w-50">
        <numSelect model="2" disable value="20"  color="#f78989" ></numSelect>
    </view>

    <text>风格3 - #409eff - 70%的宽度</text>
    <view class="w-70">
        <numSelect model="3" value="20"  color="#409eff" ></numSelect>
    </view>

    <text>风格4 - #ebb563 - 100%的宽度</text>
    <view class="w-100">
        <numSelect model="4" value="30"  color="#ebb563" ></numSelect>
    </view>

</view>

test.js

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  getNum(e){
    console.log(e.detail)
  }

})

test.json

{
  "usingComponents": {
     "numSelect":"/control/numSelect/numSelect"
  },
  "navigationBarTitleText": "示范页面"
}

test.wxss

.page{
    text-align: center;
}

.page text{
    font-size: 24rpx;
}

.w-50{
    width: 50%;
}

.w-25{
    width: 25%;
}

.w-40{
    width: 40%;
}

.w-70{
    width: 70%;
}

.w-100{
    width: 100%;
}

.page>view{
    margin: 25rpx auto;
}

发现问题请及时在评论区给我反馈，谢谢大家的指正，如果好用请给个好评哦~