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

Question

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

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

Answer 1

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

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

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>

Answer 2

只需添加

step="any"

并且您的输入字段可以接受任何小数

<q-input
  outlined
  type="number"
  v-model="formData.amount"
  label="Amount"
  lazy-rules
  step="any"
  :rules="[
    (val) =>
      (val !== null && val !== '') ||
      'Please type transaction amount',
  ]"
/>

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

Allow only number with up to one decimal place in quasar input

vue.js

vuejs2

quasar-framework