数字段子组件nToN——属性选择系列组件库（design by yRan）

本组件二次封装element的el-input，可以在全局安装了Iview的项目或者局部引入了el-input的页面中自由使用。

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

从左到右分别是：范围下限输入框、范围上限输入框

从上到下分别是：未输入状态，输入数字段状态，输入可清空

功能描述

1. 输入数字段范围
2. 校验逻辑：下限小于上限，左侧不输入默认0，右侧不输入默认无穷大
3. 当校验不通过时，提示用户并清空输入框

结构代码

<template>
  <div class="moneyContainer">
    <el-form v-model="numData" class="numData">
      <span class="specialSpan">{
  { numSpan }}</span>
      <el-input v-model.number="numData.minNum" class="specialInput" maxlength="10" clearable oninput="value=value.replace(/[^\d]/g,'')" @change="numJudge(numData.minNum, numData.maxNum)" ></el-input>
      <span>-</span>
      <el-input v-model.number="numData.maxNum" class="specialInput" maxlength="10" clearable oninput="value=value.replace(/[^\d]/g,'')" @change="numJudge(numData.minNum, numData.maxNum)" ></el-input>
    </el-form>
  </div>
</template>

• 正则限制仅输入数字
• 最大输入10亿

逻辑代码

import {
    Input, Form } from 'element-ui'
import {
    init_range_handle } from '@/common/js/c_common'
export default {
   
  name: 'nToN',
  components: {
   
    ElInput: Input,
    ElForm: Form
  },
  data () {
   
    return {
   
      numData: init_range_handle(this.initNum)
    }
  },
  props: {
   
    numSpan: {
   
      type: String,
      default () {
   
        return ''
      }
    },
    initNum: {
   
      type: Object,
      default () {
   
        return {
   
          minNum: '',
          maxNum: ''
        }
      }
    }
  },
  methods: {
   
    numJudge (min, max) {
   
      if (
        (min > -1 && max > -1 && (min < max || min === max)) ||
        min === '' ||
        max === ''
      ) {
   
        this.$emit('func', [min, max])
      } else {
   
        this.$Message.warning(`${
     this.numSpan}请输入正确的范围~>.<~`)
        this.numData.minNum = ''
        this.numData.maxNum = ''
        this.$emit('func', ['', ''])
      }
    }
  },
  created () {
   
    setTimeout(() => {
   
      if (this.initNum.minNum !== '' && this.initNum.minNum !== '') {
   
        // 需要赋初值时才执行
        this.numData = init_range_handle(this.initNum)
        this.numJudge(this.numData.minNum, this.numData.maxNum)
      }
    }, 2000)
  }
}

• initNum：父组件传的初始数字段
• numJudge：校验逻辑

组件应用

<nToN @func="setData" :initNum="init_num"></nToN>

import nToN from '@/components/numtonum/nToN'

components: {
   
    nToN
}

data () {
   
    return {
   
        init_num: deepCopy(this.initNum)
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：initNum初始显示数字段

事件钩子

// 拿到输入的数字段
setData (data) {
   
      var content = ntnData_handle(data).content
      var range = ntnData_handle(data).range
      this.$emit('getData', content, this.attr_name, range)
    }

• setData ：拿到输入的数字段

github

完整代码：点击这里