uniapp官方数字输入框组件修改版

最新推荐文章于 2024-11-11 15:46:03 发布

寒冰射手杨百亿

最新推荐文章于 2024-11-11 15:46:03 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/ybyshezhang/article/details/109879840

版权

本文介绍了作者对uniapp官方数字输入框组件的不满意之处，并分享了手动修改后的版本，强调了解决问题要从事件源入手。文章还提到了11.21的更新内容，关于value属性在父子组件通信中的作用，以及如何通过改变value来设置数字输入框的默认值。

摘要由CSDN通过智能技术生成

uniapp官方给的数字输入框组件就是个shit，下面上手动修改过的新版本
解决问题的核心就是——遇到问题寻找事件源，这样才能解决问题

11.21更新—— 这个value的值也是有用的，之前觉得没用，因为这是父子传参，单向数据流动，value是props中接收父组件的一个参数，改变它才能改变数字输入框上的默认值，不然如果你的子组件props-value中default的值就是数字输入框默认显示的值

<template>
	<view class="uni-numbox">
		<view @click="_calcValue('minus')" class="uni-numbox__minus">
			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
		</view>
		<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
		<view @click="_calcValue('plus')" class="uni-numbox__plus">
			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
		</view>
	</view>
</template>
<script>
	export default {
   
		name: "UniNumberBox",
		props: {
   
			msg:Object,//父传子，把类型传过去，因为有多个输入框
			value: {
   
				type: [Number, String],
				default: 0.20
			},
			min: {
   
				type: Number,
				default: 0.2
			},
			max: {
   
				type: Number,
				default: 100
			},
			step: {
   
				type: Number,
				default: 1
			},
			disabled: {
   
				type: Boolean,
				default: false
			}
		},
		data() {
   
			return {
   
				inputValue: 0
			};
		},
		watch: {
   
			value(val) {
   
				this.inputValue = +val;
			},
			inputValue(newVal, oldVal) {
   
				if (+newVal !== +oldVal) {
   
					console.log(this.msg)
					let obj