CInputPercent

Ô nhập phần trăm, có sẵn dấu % ở cuối ô: gõ dấu phẩy hay dấu chấm thập phân đều được, ô hiển thị 12,5 theo quy ước Việt Nam, giới hạn số chữ số lẻ, và kẹp giá trị vào khoảng [min, max] khi rời ô.

Dùng khi: thuế suất, chiết khấu, tỉ lệ hoàn thành, phần trăm hoa hồng.

Không dùng khi: số tiền (CInputCurrency) hoặc số đếm (CInputNumber).

<script setup lang="ts">
import { ref } from 'vue'
import { CFormItem } from '@tasco/ui'

// Gõ dấu phẩy hay dấu chấm đều được, ô hiển thị dấu phẩy; tối đa `precision` chữ số thập phân, kẹp về
// [min, max] khi rời ô, `min` âm thì gõ được số âm. Model là CHUỖI dấu chấm để giữ được số 0 ở cuối trong
// lúc gõ (vd "12.50"). Ô đã có sẵn dấu `%` nên nhãn không ghi thêm "(%)".
const rate = ref<string>('12.5')
const discount = ref<string>('0')
const growth = ref<string>('-3.5')
</script>

<template>
  <div style="max-width: 320px">
    <CForm>
      <CFormItem
        label="Thuế suất"
        help="Gõ 12,5 hay 12.5 đều được; giá trị bên dưới luôn dùng dấu chấm."
      >
        <CInputPercent v-model:value="rate" />
      </CFormItem>

      <CFormItem
        label="Chiết khấu (tối đa 30%)"
        help="Nhập lớn hơn 30 rồi rời ô để thấy giá trị bị kẹp lại."
      >
        <CInputPercent
          v-model:value="discount"
          :max="30"
          :precision="1"
        />
      </CFormItem>

      <CFormItem
        label="Tăng trưởng so với cùng kỳ"
        help="min là -100 nên gõ được số âm, vd -12,5."
      >
        <CInputPercent
          v-model:value="growth"
          :min="-100"
          :max="1000"
          :precision="1"
        />
      </CFormItem>
    </CForm>

    <p style="margin: 0; color: var(--tasco-color-text-muted)">
      Giá trị: <code>"{{ rate }}"</code> · <code>"{{ discount }}"</code> · <code>"{{ growth }}"</code>
    </p>
  </div>
</template>

Giá trị là chuỗi

const rate = ref<string>('12.5')

Kiểu model	string — ô rỗng là ''
Người dùng gõ	12,5 hoặc 12.5
Người dùng thấy	12,5
Model	'12.5' — luôn dùng dấu chấm

Model là chuỗi, không phải số — để giữ được những gì người dùng đang gõ dở ("12.", "12.50"). Khác với CInputCurrency vốn trả về số.

Dấu phẩy chỉ có ở phần hiển thị, model luôn dùng dấu chấm — tầng gọi API không phải đổi dấu, chỉ cần chuyển sang số khi gửi lên backend:

await api('/orders', { method: 'POST', body: { ...model, rate: Number(model.rate) } })

Chuỗi rỗng nghĩa là chưa nhập — đừng đổi thành 0, hai thứ đó khác nhau về nghiệp vụ. Người dùng mới gõ dấu (-, ,) mà chưa có chữ số rồi rời ô thì ô cũng trở về rỗng.

Giới hạn và làm tròn

<CInputPercent v-model:value="discount" :min="0" :max="30" :precision="1" />

Prop	Mặc định	Tác dụng
min	0	Nhập nhỏ hơn → kẹp về min khi rời ô. Âm thì cho gõ dấu -
max	100	Nhập lớn hơn → kẹp về max khi rời ô
precision	2	Số chữ số thập phân giữ lại, cắt ngay khi gõ

Việc kẹp xảy ra lúc rời ô, không phải lúc gõ — người dùng gõ xong con số của họ rồi mới thấy giá trị được chỉnh, tránh cảm giác bị "giật" số khi đang nhập.

Số âm

Mặc định min là 0 nên dấu - bị bỏ ngay khi gõ. Tỉ lệ có thể âm (tăng trưởng, chênh lệch so với kế hoạch) thì đặt min âm:

<CInputPercent v-model:value="growth" :min="-100" :max="1000" />

• Chỉ giữ một dấu - ở đầu số; gõ - ở giữa hay cuối số thì bị bỏ.
• Model vẫn là chuỗi dấu chấm: gõ -12,5 → '-12.5'.
• Ô có min âm dùng bàn phím thường trên điện thoại (inputmode="text"), vì bàn phím số của iOS không có phím -. Ô còn lại giữ bàn phím số.

API

Props

Tên	Kiểu	Mặc định	Mô tả
value	string | number | null	undefined	v-model:value — phần trăm dạng chuỗi dấu chấm thập phân (`'12.5'`), giữ phần đang gõ dở (`'12.'`, `'12.50'`). Ô hiển thị bằng dấu phẩy (`12,5`).
min	number	0	Giá trị nhỏ nhất; nhập nhỏ hơn sẽ bị kẹp về đây. Âm (vd `-100`) thì ô cho gõ dấu `-` ở đầu.
max	number	100	Giá trị lớn nhất; nhập lớn hơn sẽ bị kẹp về đây.
precision	number	2	Số chữ số thập phân giữ lại.

Sự kiện

Tên	Payload	Mô tả
update:value	[val: string]	v-model:value — chuỗi dấu chấm (gõ `12,5` → `'12.5'`); khi blur kẹp [min, max], chỉ có dấu thì về `''`.
blur	[e: FocusEvent]	Rời khỏi ô nhập (sau khi đã kẹp và làm tròn).

Thuộc tính khác của a-input được chuyển tiếp: placeholder, disabled, size, addon-after…

Lưu ý

• Ô đã có sẵn dấu % ở cuối: đừng ghi thêm (%) vào nhãn hay đặt addon-after="%", sẽ thành hai dấu %. Cần đơn vị khác (vd %/năm) thì truyền suffix.
• Ô không có dấu ngăn nghìn: dấu phẩy và dấu chấm đều là dấu thập phân (gõ 1.5 thấy 1,5), khác với CInputCurrency dùng dấu chấm để ngăn nghìn. Gõ nhiều dấu thì chỉ dấu đầu tiên được giữ.
• Khoảng hợp lệ đặc thù nghiệp vụ (ví dụ chiết khấu tối đa 30%) vẫn phải kiểm ở backend: max chỉ chặn trên giao diện.

Liên quan

• CInputCurrency — ô nhập tiền.
• CForm — form và rules.