更新记录

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;
}
发现问题请及时在评论区给我反馈,谢谢大家的指正,如果好用请给个好评哦~

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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