uni-app 数字输入框组件封装

(文章目录)

前言

数字输入框是一个项目中常见的需求，其中的耦合度很高，完全可以将其封装起来使用，在使用的时候传入五个参数，分别为：

1. 最大值
2. 最小值
3. 默认值
4. 弹出层的开启与关闭
5. 确认后的回传数据

一、创建数字输入框文件

创建一个文件夹components，在文件夹中创建vue文件dialog

二、制作数字输入框组件

<template>
  <view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog :title="$t('revise_quantity')" type='info' :duration="2000" :before-close="true" @close="close" @confirm="confirm">
        <uni-number-box :min="minNumber" :max="maxNumber" :value="minNumber"  v-model="number"/>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props:['dislogOpen','minNumber','maxNumber'],
	data() {
		return {
      number:0,
    }
	},
	watch:{
    dislogOpen(newVal,oldVal){
      this.number = this.minNumber
      if(newVal){
        this.open()
      }
    }
  },
	methods: {
		open() {
			this.$refs.popup.open('top')
		},
		close() { //取消关闭遮罩
      this.$emit('numberDialog',this.dislogOpen)
			this.$refs.popup.close()
		},
    confirm() { //确认关闭遮罩
      this.$emit('number',this.number)
      this.$emit('numberDialog',this.dislogOpen)
      this.$refs.popup.close()
    }
	}
}

</script>

<style>
  .uni-popup-dialog{
    width: 100%;
  }
</style>

可以看到在和当中我只传入了三个参数分别为控制弹出层开关、最小值、最大值。这是因为默认值我这里直接使用最小值来作为默认值，而最终点击事件将确认后的数值则是子组件向父组件传输，所以是在父组件进行接收，这个不清楚的话可以参考父子传值。

这里面还用到了watch监听器去监听弹出层开关数据的变化，当弹出层被触发时会将最小值赋予给默认值，并且在判断是打开遮罩时触发open()函数进行打开遮罩

注意一点在关闭遮罩的时候我多加了一个将父组件穿过来的dislogOpen重新赋值为false传回给父组件，这样子做的意义是：在我打开时发现父组件一直传过来的都是true哪怕在已经打开的状态下还是传入的true所以这里就在关闭时将父组件的dislogOpen重新赋值为false。当然这里的方法有很多，不止我这一种办法可以根据个人实际进行调整，我这里就只是分享一下我自己的方法。

三、父组件调用

父组件调用就很简单了，我这里就不详细去说明了

引入封装的组件

import dislog from '../components/dialog.vue'

<dislog 
	:dislogOpen='dislogOpen' 
	:minNumber='minNumber' 
	:maxNumber='maxNumber' 
	@numberDialog='closenumberDialog' 
	@number='spScancodeChange'>
</dislog>
//在data中定义对应的字段，以及创建对应的函数否则会报错，名字看自己需求，但是需要注意和子组件的命名一致
//dislogOpen : 控制弹出层开关显示
//minNumber : 最小值
//@numberDialog : 这个则是我刚才提到的在弹出层关闭时父组件接收到就将dislogOpen赋值为false
//@number : 接收最后确认的数值，在这个函数中也可以处理后续的逻辑