• directives vant之Field输入限制【v-input-float】


    **
     * @example
     * v-input-float="{ limit: 1, min: 0, max: 100 }" 只允许输入一位小数
     * @param limit 小数位数
     * @param min 最小值
     * @param max 最大值
     *
     * @since 2020.05.26
     */
    export const InputFloat: DirectiveOptions = {
      bind: (el, bind) => {
        const input = el.nodeName.toLowerCase() === 'input' ? (el as HTMLInputElement) : el.getElementsByTagName('input')[0]
        // 改变值过后,需要主动触发input时间,组件绑定的值才会改变
        let triggerBySelf = false
        if (input) {
          input.addEventListener('input', () => {
            if (triggerBySelf) {
              triggerBySelf = false
              return
            }
            let val = input.value.replace(/[^0-9.]/gi, '')
            if (val === '') return
            const valArr = val.split('.')
    
            if (bind.expression) {
              try {
                const option = bind.value
                if (typeof option === 'object') {
                  const { limit, min, max } = option
                  if (limit !== undefined) {
                    if (valArr.length > 1) {
                      let pointLength = valArr[1].length
                      pointLength = limit > pointLength ? pointLength : limit
                      if (limit > 0) {
                        val = +valArr[0] + (valArr.length > 1 ? `.${valArr[1].substr(0, pointLength)}` : '')
                      } else {
                        val = +valArr[0] + ''
                      }
                    } else {
                      val = +val + ''
                    }
                  }
                  if (typeof min === 'number' && +val < +min) {
                    val = min + ''
                  }
                  if (typeof max === 'number' && +val > +max) {
                    val = max + ''
                  }
                  // 改变值过后,需要主动触发input时间,组件绑定的值才会改变
                  const ev = new Event('input', { bubbles: true })
                  input.value = val
                  triggerBySelf = true
                  input.dispatchEvent(ev)
                }
              } catch (err) {
                input.value = val
                console.error(err)
              }
            }
          })
        }
      }
    }
  • 相关阅读:
    git操作
    计算天数
    web小结~2019.3.24
    数据统计值的计算+PYTHON
    python~序列类型及操作
    一个日期加上若干天后是什么日期
    完数与盈数
    分段函数
    求最大最小
    D进制的A+B
  • 原文地址:https://www.cnblogs.com/binli/p/14335303.html
Copyright © 2020-2023  润新知