uni-app NumberBox 数字输入框简单使用方法

浅浅的花香味﹌ 2022-02-02 23:19 2508阅读 0赞

链接：[https://pan.baidu.com/s/1WXRxsIIegpMo-6Sp8ZX5bw][https_pan.baidu.com_s_1WXRxsIIegpMo-6Sp8ZX5bw]  
提取码：nxzb  
复制这段内容后打开百度网盘手机App，操作更方便哦.  
官方的最新源码，change的bug已经解决了。  
老版本文档：[https://ext.dcloud.net.cn/plugin?id=31][https_ext.dcloud.net.cn_plugin_id_31]  
1.简单介绍一下本人的用法.

修改插件uni-number-box.vue第44行代码，修改为：  
this.$emit(‘input’, newVal)

<template>
    <uni-number-box v-model="numberValue" @input="bindChange" />
    </template>
    <script>
    		import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
    		export default {
    		components: {uniNumberBox},
    		data() {
    			return {
    				numberValue:1,
    			}
    	},
    	methods: {
    				bindChange(value){
    				console.log(value)
    			}
    	}
    }
    </script>

以上为基本用法，我们来分析一些这个组件的源码：  
未发生变化的地方：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70]  
默认值还是1,最小值为1，最大值为100.可以设置禁用状态.  
比较第老版本的变化：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70 1]  
使用变量newVal,和oldVal 来控制页面的最后显示，及设置值。

[https_pan.baidu.com_s_1WXRxsIIegpMo-6Sp8ZX5bw]: https://pan.baidu.com/s/1WXRxsIIegpMo-6Sp8ZX5bw
[https_ext.dcloud.net.cn_plugin_id_31]: https://ext.dcloud.net.cn/plugin?id=31
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70]: /images/20220203/85cceee3f09f4d2bae5cadca602e5c13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70 1]: /images/20220203/1a88acf0cf1343249a8148a6f9be3822.png