vue.js - 在类星体输入中只允许最多一位小数的数字

Question

是否可以使用 Quasar q-input 只允许整数和 float 只有一位小数？我尝试使用 :decimals="1" 和 step="0.1" 但它仍然允许我输入任何类型的数字 - 所以没有表单验证我明白了。

有没有办法，例如通过在 q-input 中使用 :rules 参数来只允许带一位小数的整数和 float ？

Answer 1

根据documentation ，您可以使用 mask Prop 做一些事情。对于小数点后一位，我相信应该是 mask="#.#"

我在下面包含了一个片段，它是 this 的修改版本代码笔。

new Vue({
  el: '#app',
  data () {
    return {
      number: null
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.11.1/dist/quasar.umd.min.js"></script>

<div id="app">
  <div class="q-pa-md" style="max-width: 300px">
    <div class="q-gutter-md">
      <q-input
        filled
        v-model="number"
        label="1 decimals"
        mask="#.#"
        fill-mask="0"
        reverse-fill-mask
        hint="Mask: #.#"
        input-class="text-right"
      ></q-input>
    </div>
  </div>
  
  Number is {{number}}
</div>