vueでのカスタム命令で、input値がnumberと小数点の桁数に制限されます.

まず、iOSでinput設定type=numberが無効な問題が発生しました.ポップアップキーボードを実現するにはtype=telしか設定できませんが、問題ははるかに終わっていません.type=telは小数点を入力できません.だから、inputをnumberに制限し、小数点の入力を制限するには、自分で論理を書く必要があります.
アイデアはinputイベントリスニングを追加し,正則的に条件に合致するか否かを判断し,合致しない場合は前回合致した数値にリセットすることである.
使用方法は

 type="number"
 
 data-dotrange="{0,2}"
 v-model.number.trim="num"
 v-limit-input-number="num"/>
 

命令の小論理

// limit-input-number.js

//             
const setValue = function (exp, value, context) {
  value = isNaN(value) ? '' : value
  new Function ('context', 'value', `context.${exp} = value`)(context, value)
}
//      
export default {
  bind (el, {expression}, {context}) {
    //    lastValue
    el.lastValue = el.value

    //   dataset          
    let allowDot = !!el.dataset.dotrange
    let dotRange = el.dataset.dotrange || `{0,2}` //   
    let pattern = `^[0-9]+${allowDot ? `(.[0-9]${dotRange})?` : ''}$`

    if (!expression) {
      throw new TypeError('   expression')
    }

    el.handleInputEvent = function (e) {
      setTimeout(() => {
        if (e.target.value === '') {
          setValue(expression, '', context)
          //       ，   
          e.target.value = ''
        } else if (e.target.value !== '' && !new RegExp(pattern).test(e.target.value)) {
          setValue(expression, parseFloat(e.target.lastValue), context)
          //       ，    lastValue
          e.target.value = e.target.lastValue
          if (allowDot) {
          //     ，      ，      ，      
            e.target.blur()
            context.showToast(`      ${dotRange.replace(/[}{]/g, '').split(',')[1]} `)
          }
        }
        e.target.lastValue = e.target.value
      }, 0)
    }
    el.addEventListener('input', el.handleInputEvent, false)
  },
  unbind (el) {
    el && el.removeEventListener('input', el.handleInputEvent, false)
  }
}