博客

适用于业务场景如下图：输入框输入年龄，选择年龄单位，判断年龄阶段

HTML用element-ui

<el-input v-model="ageNumber" placeholder="请输入" maxlength="3" @blur="ageInput">
   <el-select slot="append" v-model="ageUnit" placeholder="请选择" @change="ageUnitChange">
      <el-option v-for="item in ageUnitOptions" :key="item.key" :label="item.value" :value="item.key" />
    </el-select>
</el-input>
<el-select v-model="ageRange" placeholder="请选择">
    <el-option v-for="item in ageGroupOptions" :key="item.key" :label="item.value" :value="item.key" />
</el-select>
<el-tooltip placement="top" effect="dark">
    <div slot="content">
        <div v-for="item in ageGroupOptions" :key="item.key">
            {{item.value}}：{{item.min}}{{item.max?`-${item.max}${item.unitName}`:item.unitName}}
        </div>
    </div>
    <i class="el-icon-warning" />
</el-tooltip>

js

const YEAR = 1
const MONTH = 2
const DAY = 3
const ageUnitOptions = [
  {
    key: YEAR,
    value: '岁'
  }, {
    key:MONTH,
    value: '月'
  },
  {
    key: DAY,
    value: '天'
  }
]
const ageGroupOptions = [
  {
    value: '新生儿',
    min: 1,
    max: 28,
    unit: DAY,
    unitName: '天',
    key: 1
  },
  {
    value: '婴幼儿',
    min: 1,
    max: 36,
    unit: MONTH,
    unitName: '个月',
    key: 2
  },
  {
    value: '青少年',
    min: 3,
    max: 17,
    unit: YEAR,
    unitName: '岁',
    key: 3
  },
  {
    value: '成年人',
    min: 18,
    max: 59,
    unit: YEAR,
    unitName: '岁',
    key: 4
  },
  {
    value: '老年人',
    min: 60,
    max: null,
    unit: YEAR,
    unitName: '岁及以上',
    key: 5
  }]
  let ageUnit = YEAR
  let ageNumber = ''
  function findAgeRange(num, u) {
    const item = ageGroupOptions.find((i, index) => {
      return index !== ageGroupOptions.length - 1 && i.unit === u && num <= i.max && num >= i.min
    })
    if (item) {
      return item.key
    } else {
      return judgeAgeRange(u, num)
    }
  }
  function judgeAgeRange(unit, age) {
    let u = unit
    let num = age
    switch (unit) {
      case YEAR: // 年龄选的岁是最大的，转为月，单位变为月
        u = MONTH
        num = num * 12 // 转成月判断
        return findAgeRange(num, u)
      case MONTH: // 年龄选的月可以升为岁，可以降为天
        if (num > 36) { // 因为以月为单位的年龄阶段只有婴幼儿, 婴幼儿的最大月份是36
          u = YEAR
          num = num / 12 // 转成年判断
        } else {
          u = DAY
          num = num * 28 // 因为以日为单位的年龄阶段只有新生儿, 新生儿的最大天数是28
        }
        return findAgeRange(num, u)
      case DAY:
        if (num > 30) { // 因为新生儿最大是28天，一个月按照30天算,
          u = MONTH
          num = num / 30
          return findAgeRange(num, u)
        } else {
          return 2
        }
      default: return -1
    }
  }

function getAgeRange(age, unit) {
  const num = parseInt(age)
  // 默认第一项新生儿
  let range = 1
  const last = ageGroupOptions[ageGroupOptions.length - 1]
  if (num >= last.min && unit === last.unit) {
    // 判断最后一项，因为最后一项的max是null，其实也可以写999就不用单独判断了，因为输入框限制了3位，最大999
    range = last.key
  } else if (num === 0) {
//判断为0，因为没有哪一项年龄阶段是0的，做下保护
    range = 1
  } else {
    range = findAgeRange(num, unit)
  }
  ageRange = range
}
function ageInput(e) {
  const val = e.target.value
  if (/^\d+$/.test(val)) {
  // 正则判断满不满足输入条件，其实可以做更详细，例如开头不能为0，只能输入数字
    getAgeRange(val, ageUnit)
  }
}
function ageUnitChange(val) {
  if (/^\d+$/.test(ageNumber)) {
    getAgeRange(ageNumber, val)
  }
}