更新记录

1.0.0(2023-01-05)

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

zyNumberBox 步进器

zyNumberBox 步进器参数属性

序号 参数 说明 类型 可选值 默认值 是否必须
1 value 用于双向绑定的值,初始化时设置设为默认min值(最小值) String/Number --- 0
2 step 步长,每次加或减的值,支持小数值 String/Number --- 1
3 min 可输入的最小值 String/Number --- 0 ×
4 max 可输入的最大值 String/Number --- Number.MAX_SAFE_INTEGER ×
5 disabled 加减号禁用 Boolean true/false false ×
6 focus 输入框焦点 Boolean true/false false ×
7 inputdisabled 输入框禁用 Boolean true/false false ×
8 color 字体颜色 String --- #222222 ×
9 discolor 禁用状态下字体颜色 String --- #999999 ×
10 bgcolor 背景颜色 String --- #EBECEE ×
11 disbgcolor 禁用状态下背景颜色 String --- #F7F8FA ×
12 inputwidth input框的宽度,单位px String/ Number --- 35 ×
13 size button和input的大小,最小设置为12,否则样式对不齐 String/Number --- 12 ×
14 integer 限制只输入整数 Boolean true/false false ×
15 decimal 限制只输入两位小数 Boolean true/false false ×

zyNumberBox 步进器事件

序号 参数 说明 类型 可选值 默认值 是否必须
1 change 加/减事件 Function (event)=>{} ×

zyNumberBox 步进器使用方式

<template>
    <view class="container">
        <!-- 基础用法 -->
        <view class="line">
            <text class="line_text">基础用法:</text>
            <zy-number-box :value="100" @change="change"></zy-number-box>
        </view>
        <!-- 步长设置 -->
        <view class="line">
            <text class="line_text">步长设置:</text>
            <zy-number-box :step="2"></zy-number-box>
        </view>
        <!-- 限制输入范围 -->
        <view class="line">
            <text class="line_text">限制输入范围:</text>
            <zy-number-box :min="-2" :max="10" decimal></zy-number-box>
        </view>
        <!-- 加减号禁用 -->
        <view class="line">
            <text class="line_text">加减号禁用:</text>
            <zy-number-box disabled></zy-number-box>
        </view>
        <!-- 输入框禁用 -->
        <view class="line">
            <text class="line_text">输入框禁用:</text>
            <zy-number-box inputdisabled></zy-number-box>
        </view>
        <!-- 获取焦点 -->
        <view class="line">
            <text class="line_text">获取焦点:</text>
            <zy-number-box focus></zy-number-box>
        </view>
        <!-- input框宽度 -->
        <view class="line">
            <text class="line_text">input框宽度:</text>
            <zy-number-box :inputwidth="88"></zy-number-box>
        </view>
        <!-- 限制只可输入整数 -->
        <view class="line">
            <text class="line_text">限制只可输入整数:</text>
            <zy-number-box integer></zy-number-box>
        </view>
        <!-- 限制只支持两位小数 -->
        <view class="line">
            <text class="line_text">限制只支持两位小数:</text>
            <zy-number-box decimal></zy-number-box>
        </view>
        <!-- 自定义颜色和大小 -->
        <view class="line">
            <text class="line_text">自定义颜色和大小:</text>
            <zy-number-box color="#fff" bgcolor="#409efe" discolor="#fff" disbgcolor="#9AC9F9" size="16">
            </zy-number-box>
        </view>
    </view>
</template>

<script>
    import zyNumberBox from '@/uni_modules/zy-number-box/components/zy-number-box/zy-number-box.vue'
    export default {
        components: {
            zyNumberBox
        },
        data() {
            return {}
        },
        methods: {
            change(e) {
                console.log(e)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        background-color: #ffffff;
        width: 100%;
        height: 100%;
    }

    .line {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;
    }

    .line_text {
        margin: auto 0;
    }
</style>

如使用过程中有任何问题,或者您有一些好的建议,欢迎联系QQ:2360273432

隐私、权限声明

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

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

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

许可协议

MIT协议

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