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

链接:https://pan.baidu.com/s/1WXRxsIIegpMo-6Sp8ZX5bw
提取码:nxzb
复制这段内容后打开百度网盘手机App,操作更方便哦.
官方的最新源码,change的bug已经解决了。
老版本文档: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>

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

发布了50 篇原创文章 · 获赞 85 · 访问量 161万+

猜你喜欢

转载自blog.csdn.net/qq_24347541/article/details/89949423