SMoneyField <s-money-field>

Một ô nhập số cho số tiền. SMoneyField là Vue 3 wrapper có type cho web component <s-money-field> của Shopify Polaris.

import { SMoneyField } from 'polaris-vue-elements'

Best practices

• Đặt min và max ở giới hạn thực tế. Ví dụ, giá sản phẩm có thể dùng min là 0.01 để không thể bằng 0, giảm giá có thể nằm trong khoảng từ 0 đến tổng đơn hàng, và hoàn tiền có thể bị giới hạn ở số tiền đã thanh toán. Luôn kiểm tra giá trị theo quy tắc nghiệp vụ của bạn nữa.
• Nêu chính xác giới hạn trong error. Thay vì "Invalid amount", hãy nói kiểu như "Price must be at least $0.01" để người bán biết họ đã vi phạm ràng buộc nào.
• Không đưa ký hiệu tiền tệ vào label và placeholder. Thêm "$" hoặc ký hiệu tương tự có thể xung đột với định dạng tiền tệ mà field đã tự xử lý.
• Gắn nhãn số tiền theo mục đích của nó. "Product base price" hay "Discount amount" cho người bán biết nhiều hơn "Amount" hay "Price".
• Điền sẵn value khi chỉnh sửa. Hiển thị số tiền hiện tại cho các giá trị có sẵn; với mục mới, hãy cân nhắc một giá trị mặc định hợp lý như 0.00 hoặc một mức giá điển hình.

<SMoneyField label="Product base price" :min="0.01" />

Xem best practices của Shopify cho <s-money-field> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SMoneyField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SMoneyField label="Price" currencyCode="USD" placeholder="0.00" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model trên <SMoneyField> gắn với property value và lắng nghe DOM event input.

<SMoneyField v-model="value" />

tương đương với:

<SMoneyField :value="value" @input="value = $event.target.value" />

Props

Prop	Kiểu	Mô tả
autocomplete	string	Gợi ý về nội dung dự kiến của trường. Khi đặt thành on (mặc định), thuộc tính này cho biết trường nên hỗ trợ tự động điền, nhưng bạn không có thêm thông tin ngữ nghĩa nào về nội dung dự kiến. Khi đặt thành off, bạn cho biết trường này chứa thông tin nhạy cảm, hoặc nội dung không bao giờ được lưu, như mã dùng một lần. Ngoài ra, bạn có thể cung cấp giá trị mô tả loại dữ liệu cụ thể mà bạn muốn được nhập vào trường này khi tự động điền.
currencyCode	"auto" | "USD" | "EUR" | "GBP" | "CAD" | "AFN" | "ALL" | "DZD" … (154 more)	Mã tiền tệ của trường. Khi đặt là 'auto', trường sẽ hiển thị mã tiền tệ của cửa hàng. Nếu cửa hàng chưa đặt mã tiền tệ, sẽ dùng 'XXX', giá trị biểu thị không có tiền tệ. Giá trị này sẽ khớp với mã tiền tệ chung của cửa hàng, nên nếu cần biết mã tiền tệ của trường, bạn có thể đọc giá trị từ các API đó.
defaultValue	string	Giá trị mặc định của trường.
details	any	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
disabled	boolean	Vô hiệu hóa trường, không cho phép bất kỳ tương tác nào.
error	any	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
id	string	Định danh duy nhất của phần tử.
label	any	Nội dung dùng làm nhãn của trường.
labelAccessibilityVisibility	"visible" | "exclusive"	Thay đổi khả năng hiển thị của nhãn của component. - visible: nhãn hiển thị với mọi người dùng. - exclusive: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
max	number	Số thập phân hoặc số nguyên lớn nhất được chấp nhận cho trường. Khi dùng cùng step, giá trị sẽ được làm tròn xuống về số max. Lưu ý: người dùng vẫn có thể dùng bàn phím để nhập số lớn hơn max. Việc thêm kiểm tra hợp lệ phù hợp là trách nhiệm của lập trình viên.
min	number	Số thập phân hoặc số nguyên nhỏ nhất được chấp nhận cho trường. Khi dùng cùng step, giá trị sẽ được làm tròn lên về số min. Lưu ý: người dùng vẫn có thể dùng bàn phím để nhập số nhỏ hơn min. Việc thêm kiểm tra hợp lệ phù hợp là trách nhiệm của lập trình viên.
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
placeholder	string	Gợi ý ngắn mô tả giá trị mong đợi của trường.
readOnly	boolean	Người dùng không thể chỉnh sửa trường. Trường vẫn có thể nhận focus và sẽ được trình đọc màn hình thông báo.
required	boolean	Trường có bắt buộc phải có giá trị hay không. Yêu cầu này bổ sung giá trị ngữ nghĩa cho trường, nhưng sẽ không tự động hiển thị lỗi. Nếu muốn hiển thị lỗi khi trường này trống, bạn có thể dùng thuộc tính error.
value	string

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Events

Event	Kiểu
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Lắng nghe các event này bằng listener dạng @blur trên <SMoneyField>.

Slots

Slot	Mô tả
details
error