uni-app digital input box component package

---

foreword

The digital input box is a common requirement in a project, and the coupling degree is very high. It can be packaged and used completely. When using it, five parameters are passed in, which are:

1. maximum value
2. minimum value
3. Defaults
4. Opening and closing the popup layer
5. Confirmed return data

---

1. Create a digital input box file

Create a folder components, create a vue file dialog in the folder

2. Make the digital input box component

<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>

It can be seen that in and I only passed in three parameters, which are control popup layer switch, minimum value, and maximum value. This is because I directly use the minimum value as the default value here, and the value after the final click event will be confirmed is transmitted from the child component to the parent component, so it is received in the parent component. If this is not clear, you can refer to parent-child transmission value.

The watch listener is also used to monitor the change of the switch data of the pop-up layer. When the pop-up layer is triggered, the minimum value will be assigned to the default value, and the open() function will be triggered to open the mask when it is judged to open the mask.

Note that when closing the mask, I added an additional dislogOpen that passes through the parent component and reassigns it to false and sends it back to the parent component. The meaning of this is: when I open it, I find that the parent component has always passed true Even if it is already opened, it is still passed in true, so here the dislogOpen of the parent component is reassigned to false when it is closed. Of course, there are many methods here, not only my method can be adjusted according to personal reality, I just share my own method here.

3. Parent component call

The parent component call is very simple, I will not explain it in detail here

Import packaged components

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 : 接收最后确认的数值，在这个函数中也可以处理后续的逻辑