อินพุตสกุลเงิน
อินพุตสกุลเงินพร้อมตัวเลือกรหัสสกุลเงินและการจัดรูปแบบ (ตัวคั่นหลักพัน ทศนิยมคงที่ การแสดงสัญลักษณ์/รหัส)
การใช้งานพื้นฐาน
<template>
<spr-input-currency id="input-currency-basic" v-model="inputModel" label="อินพุตสกุลเงิน" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะทำงาน
<template>
<spr-input-currency id="input-currency-active-state" v-model="inputModel" label="อินพุตสกุลเงิน" active />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะข้อผิดพลาด
<template>
<spr-input-currency id="input-currency-error-state" v-model="inputModel" label="อินพุตสกุลเงิน" error>
<template #icon>
<Icon icon="ph:warning-circle-fill" />
</template>
</spr-input-currency>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะปิดใช้งาน
<template>
<spr-input-currency id="input-currency-disabled-state" v-model="inputModel" label="อินพุตสกุลเงิน" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>ปิดใช้งานการเลือกสกุลเงิน
<template>
<spr-input-currency
id="input-currency-disabled-country-currency"
v-model="inputModel"
label="อินพุตสกุลเงิน"
disabled-country-currency
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>ใช้รหัสสกุลเงินหรือสัญลักษณ์
ค่าเริ่มต้นขององค์ประกอบสกุลเงินคือการแสดงรหัสสกุลเงิน (เช่น USD, EUR) คุณสามารถเปลี่ยนมาแสดงสัญลักษณ์สกุลเงิน (เช่น $, €) ได้โดยตั้งค่า prop display-as-symbol เป็น true
<template>
<spr-input-currency id="input-currency-code-or-symbol-1" v-model="inputModel" label="อินพุตสกุลเงิน" />
<spr-input-currency
id="input-currency-code-or-symbol-2"
v-model="inputModel"
label="อินพุตสกุลเงิน"
display-as-symbol
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>รับข้อมูลเมตาสกุลเงินที่เลือก
ผลลัพธ์ของโมเดล:
สกุลเงินที่เลือก:
สัญลักษณ์ที่เลือก:
ค่าดิบ:
<template>
<spr-input-currency
id="input-currency-selected-currency"
v-model="inputModel"
label="อินพุตสกุลเงิน"
@get-selected-currency-meta="handleSelectedCurrencyMeta"
/>
<div class="spr-bg-blue-100 spr-p-4">
<p>ผลลัพธ์ของโมเดล: {{ inputModel }}</p>
<p>สกุลเงินที่เลือก: {{ selectedCurrency }}</p>
<p>สัญลักษณ์ที่เลือก: {{ selectedSymbol }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
const selectedCurrency = ref('');
const selectedSymbol = ref('');
const handleSelectedCurrencyMeta = (val: { currency: string; symbol: string }) => {
selectedCurrency.value = val.currency;
selectedSymbol.value = val.symbol;
};
</script>เลือกสกุลเงินล่วงหน้า
<template>
<spr-input-currency v-model="inputModel" label="อินพุตสกุลเงิน" pre-selected-currency="USD" />
</template>เปลี่ยนสกุลเงินด้วยตนเอง
เปลี่ยนสกุลเงินแบบไดนามิกโดยใช้ prop currency องค์ประกอบนี้รองรับรหัสสกุลเงินตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก หากไม่ได้ระบุ prop currency จะใช้ค่าเริ่มต้น PHP (เปโซฟิลิปปินส์)
สกุลเงินที่เลือก: PHP
จำนวนเงิน:
<template>
<div class="spr-grid spr-gap-4">
<spr-select
id="currency-select"
v-model="selectedCurrency"
label="เลือกสกุลเงิน"
:options="currencyOptions"
width="100%"
/>
<spr-input-currency
v-model="amount"
label="อินพุตสกุลเงินแบบไดนามิก"
:currency="selectedCurrency"
auto-format
placeholder="ป้อนจำนวนเงิน"
/>
<div class="spr-rounded spr-border spr-border-blue-200 spr-bg-blue-50 spr-p-4">
<p class="spr-text-sm spr-text-gray-700">
<span class="spr-font-medium">สกุลเงินที่เลือก:</span> {{ selectedCurrency.toUpperCase() }}
</p>
<p class="spr-text-sm spr-text-gray-700"><span class="spr-font-medium">จำนวนเงิน:</span> {{ amount }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import SprSelect from '@/components/select/select.vue';
const amount = ref('');
const selectedCurrency = ref('php');
const currencyOptions = [
{ text: 'PHP (เปโซฟิลิปปินส์)', value: 'php' },
{ text: 'USD (ดอลลาร์สหรัฐฯ)', value: 'usd' },
{ text: 'EUR (ยูโร)', value: 'eur' },
{ text: 'GBP (ปอนด์อังกฤษ)', value: 'gbp' },
{ text: 'JPY (เยนญี่ปุ่น)', value: 'jpy' },
{ text: 'AUD (ดอลลาร์ออสเตรเลีย)', value: 'aud' },
];
</script>หมายเหตุ
- ไม่คำนึงถึงตัวพิมพ์: ทั้ง
currency="usd"และcurrency="USD"ทำงานเหมือนกัน - ค่าเริ่มต้น: หากไม่ระบุ prop นี้ องค์ประกอบจะใช้
'PHP'เป็นค่าเริ่มต้น - การเปลี่ยนแปลงแบบไดนามิก: เปลี่ยนสกุลเงินได้ตลอดเวลา และองค์ประกอบจะจัดรูปแบบอินพุตใหม่
- รหัสที่ถูกต้อง: ใช้รหัสสกุลเงิน ISO 4217 มาตรฐาน (เช่น USD, EUR, PHP, JPY ฯลฯ)
ตัวอย่าง
<!-- ค่าเริ่มต้น (PHP) -->
<spr-input-currency v-model="amount" />
<!-- ตัวพิมพ์ใหญ่ที่ชัดเจน -->
<spr-input-currency v-model="amount" currency="USD" />
<!-- รองรับตัวพิมพ์เล็ก -->
<spr-input-currency v-model="amount" currency="eur" />
<!-- แบบไดนามิก/รีแอคทีฟ -->
<spr-input-currency v-model="amount" :currency="userSelectedCurrency" />จัดรูปแบบอัตโนมัติ
นำไปใช้ตัวคั่นหลักพันและจำกัดทศนิยมตามมาตรฐานสกุลเงินโดยอัตโนมัติขณะที่พิมพ์และเมื่อเบลอ หากมีค่าอยู่แล้วเมื่อส่วนประกอบโหลด จะนำไปใช้จัดรูปแบบอัตโนมัติทันที
<template>
<spr-input-currency
id="input-currency-auto-format-empty"
v-model="inputModelEmpty"
label="อินพุตสกุลเงินว่าง"
auto-format
/>
<spr-input-currency
id="input-currency-auto-format-existing"
v-model="inputModelWithValue"
label="มีค่าเริ่มต้น"
auto-format
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModelEmpty = ref('');
// ค่านี้จะถูกจัดรูปแบบอัตโนมัติเมื่อส่วนประกอบโหลด
const inputModelWithValue = ref('1234567.8');
</script>จำนวนทศนิยมสูงสุดและต่ำสุด
ควบคุมจำนวนทศนิยมสูงสุดและต่ำสุดที่อนุญาตสำหรับอินพุตสกุลเงิน
กรณีการใช้งาน:
max-decimalsเพียงอย่างเดียว - จำกัดความแม่นยำโดยไม่บังคับให้มีตำแหน่งทศนิยม (เช่น ราคา cryptocurrency)min-decimalsเพียงอย่างเดียว - บังคับให้มีตำแหน่งทศนิยมขั้นต่ำโดยไม่จำกัดความแม่นยำ- ทั้งคู่ - สร้างช่วงของตำแหน่งทศนิยมที่อนุญาต (ที่พบบ่อยที่สุด)
ตัวอย่างที่ 1: ตำแหน่งทศนิยมคงที่ (Price Field)
แสดงตำแหน่งทศนิยม 2 ตำแหน่งเสมอ เหมาะสำหรับ input ราคาที่ต้องการความสอดคล้อง
ลองพิมพ์: 100 → หลังจากหมดเวลาแสดง 100.00
<template>
<spr-input-currency
id="input-currency-fixed-decimals"
v-model="price"
label="ราคาสินค้า"
:min-decimals="2"
:max-decimals="2"
placeholder="ป้อนราคา"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const price = ref('');
</script>ตัวอย่างที่ 2: ตำแหน่งทศนิยมที่ยืดหยุ่น (0-4 Range)
อนุญาต 0 ถึง 4 ตำแหน่งทศนิยม มีประโยชน์สำหรับ cryptocurrency หรือการวัดที่ความแม่นยำแตกต่างกัน
ลองพิมพ์: 100 → คงอยู่เป็น 100 (ไม่มีการเติมเต็ม), หรือ 100.123456 → กลายเป็น 100.1234
<template>
<spr-input-currency
id="input-currency-flexible-decimals"
v-model="cryptoAmount"
label="จำนวน Cryptocurrency"
:min-decimals="0"
:max-decimals="4"
placeholder="ป้อนจำนวน"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const cryptoAmount = ref('');
</script>ตัวอย่างที่ 3: ความแม่นยำทางวิทยาศาสตร์ (3-6 Range)
บังคับให้มีอย่างน้อย 3 ตำแหน่งทศนิยม อนุญาตให้ 6 ตำแหน่งทศนิยม มีประโยชน์สำหรับการคำนวณทางวิทยาศาสตร์หรือการเงิน
ลองพิมพ์: 100 → กลายเป็น 100.000, หรือ 100.1234567 → กลายเป็น 100.123456
<template>
<spr-input-currency
id="input-currency-scientific-decimals"
v-model="scientificValue"
label="การวัดทางวิทยาศาสตร์"
:min-decimals="3"
:max-decimals="6"
placeholder="ป้อนค่า"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const scientificValue = ref('');
</script>ตัวอย่างที่ 4: Max Decimals เพียงอย่างเดียว
จำกัดความแม่นยำให้ 4 ตำแหน่งทศนิยมโดยไม่บังคับให้มีการเติมเต็มขั้นต่ำ มีประโยชน์สำหรับ input ที่ยืดหยุ่น
ลองพิมพ์: 100 → คงอยู่เป็น 100, หรือ 100.12345 → กลายเป็น 100.1234
<template>
<spr-input-currency
id="input-currency-max-decimals"
v-model="amount"
label="จำนวนที่ยืดหยุ่น"
:max-decimals="4"
placeholder="ป้อนจำนวน"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const amount = ref('');
</script>ตัวอย่างที่ 5: Min Decimals เพียงอย่างเดียว
บังคับให้มี 2 ตำแหน่งทศนิยมโดยไม่มีขีดจำกัดสูงสุด มีประโยชน์เมื่อคุณต้องการแสดงความแม่นยำอย่างน้อยที่สุด
ลองพิมพ์: 100 → กลายเป็น 100.00, หรือ 100.123456 → คงอยู่เป็น 100.123456
<template>
<spr-input-currency
id="input-currency-min-decimals"
v-model="minAmount"
label="จำนวนที่มีการเติมเต็มขั้นต่ำ"
:min-decimals="2"
placeholder="ป้อนจำนวน"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const minAmount = ref('');
</script>ปิดใช้งานการปัดเศษ
เมื่อเปิดใช้งาน องค์ประกอบจะตัดทศนิยมแทนการปัดเศษให้เป็นทศนิยมสูงสุดที่อนุญาต
<template>
<spr-input-currency
id="input-currency-disable-rounding"
v-model="inputModel"
label="อินพุตสกุลเงิน"
:disable-rounding="true"
:max-decimals="2"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>ข้อความช่วยเหลือแบบกำหนดเอง
คุณสามารถส่งข้อความช่วยเหลือแบบกำหนดเองผ่านสล็อต helperMessage เพื่อแสดงการตรวจสอบความถูกต้องแบบกำหนดเองหรือข้อมูลเพิ่มเติม
<template>
<spr-input-currency
id="input-currency-custom-helper"
v-model="inputModel"
label="อินพุตสกุลเงิน"
placeholder="ป้อนจำนวนเงิน"
:display-helper="true"
:error="!!errorMessage"
>
<template #helperMessage>
<div class="spr-flex spr-gap-2">
<span v-if="errorMessage" class="spr-text-red-500">{{ errorMessage }}</span>
<span v-else class="spr-text-gray-500">จำนวนเงินขั้นต่ำคือ $100</span>
</div>
</template>
</spr-input-currency>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const inputModel = ref('');
const errorMessage = computed(() => {
const numValue = Number(inputModel.value.replace(/[^0-9.-]/g, ''));
return numValue > 0 && numValue < 100 ? 'จำนวนเงินต้องมีค่าอย่างน้อย $100' : '';
});
</script>เหตุการณ์ Get Currency Value
เข้าถึงค่าตัวเลขที่แยกวิเคราะห์โดยตรงไปยังเหตุการณ์ @get-currency-value ซึ่งส่งหอให้ค่าตัวเลขชนิด ทำให้งายต่อใช้กุดก่อนการแปลงปลายจากสตริง
<template>
<div>
<spr-input-currency
id="input-currency-get-value"
v-model="currencyValue"
label="รับค่าดิบ"
placeholder="พิมพ์และเบลอเพื่อดูค่าดิบ"
@get-currency-value="handleGetCurrencyValue"
/>
<div v-if="rawValue" class="spr-mt-4 spr-rounded spr-bg-gray-100 spr-p-3">
<p class="spr-text-sm spr-text-gray-700">
ค่าดิบ: <span class="spr-font-bold">{{ rawValue }}</span>
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const currencyValue = ref('');
const numericValue = ref<number | null>(null);
const handleGetCurrencyValue = (value: number) => {
numericValue.value = value;
console.log('Numeric value:', value);
};
</script>ตัวอย่างการใช้งาน:
เมื่อคุณพิมพ์ 1234567.89 และเบลอ @get-currency-value จะปล่อย 1234567.89 (ตัวเลข)
// ในหติวาปิดของคุณ
const onGetCurrencyValue = (value: number) => {
// ใช้ค่าตัวเลขสำหรับคำนวณแต้โดยตรง
console.log('User entered:', value);
// ส่งไปยัง API
// เก็บไว้ในรฐานข้อมูล
// ทำการคำนวณ
const discounted = value * 0.9;
};ประเด็นหลัก:
@get-currency-valueปล่อยค่าตัวเลขโดยไม่มีตัวคั่นหลักพัน- ใช้ตัวคั่นทศนิยมของภาษา (เช่น
.สำหรับ en-US,,สำหรับ de-DE) - ขณะพิมพ์: ปล่อยค่าอินพุตดิบตามที่พิมพ์ (เช่น
123) - เมื่อเบลอ: ปล่อยค่าตัวเลขที่จัดรูปแบบแล้วโดยไม่มีตัวคั่นหลักพัน (เช่น
123.00) - ปล่อยออกมาเมื่อ ติดตั้งองค์ประกอบ หากมีค่าเริ่มต้น
- NOT ปล่อยออกมาเมื่อเลือกสกุลเงินเปลี่ยนแปลง
- มีประโยชน์สำหรับการจัดเก็บ input ของผู้ใช้ที่ไม่มีการจัดรูปแบบหรือเพื่อการประมวลผลแบบกำหนดเอง
ค่าฐาน
ใช้ prop base-value เพื่อกรอกค่าเริ่มต้นโดยอัตโนมัติลงในอินพุตเมื่อว่างและสูญเสียโฟกัส สิ่งนี้มีประโยชน์เพื่อให้แน่ใจว่ามีค่าต่ำสุดเสมอ
<template>
<div class="spr-grid spr-gap-4">
<spr-input-currency
id="input-currency-base-value-zero"
v-model="amount"
label="ค่าฐาน 0"
placeholder="พยายามว่างและเบลอ"
:base-value="0"
/>
<spr-input-currency
id="input-currency-base-value-two"
v-model="amount"
label="ค่าฐาน 2"
placeholder="พยายามว่างและเบลอ"
:base-value="2"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const amount = ref('');
</script>ตัวอย่างการใช้งาน:
เมื่อตั้งค่า base-value และลบอินพุต เมื่อเบลอ องค์ประกอบจะเติมค่าฐานที่จัดรูปแบบโดยอัตโนมัติ:
- ถ้าผู้ใช้ลบช่องด้วย
:base-value="0"→ เมื่อเบลอจะแสดง0.00 - ถ้าผู้ใช้ลบช่องด้วย
:base-value="2"→ เมื่อเบลอจะแสดง2.00 - ถ้าผู้ใช้ลบช่องด้วย
:base-value="100.50"→ เมื่อเบลอจะแสดง100.50
สิ่งนี้มีประโยชน์สำหรับ:
- การตรวจสอบให้แน่ใจว่ามีค่าต่ำสุดในแบบฟอร์มการเงิน
- ปริมาณเริ่มต้นในรถเข็นช็อปปิ้ง
- ค่าสำรองเมื่อลบอินพุต
การอ้างอิง API
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
id | รหัสไอดีเฉพาะสำหรับองค์ประกอบ | String | '' |
v-model | ค่าสตริงสกุลเงินดิบ (อาจยังไม่ได้จัดรูปแบบขณะที่พิมพ์) | String | '' |
placeholder | ข้อความตัวยึดตำแหน่งที่แสดงเมื่ออินพุตว่างเปล่า | String | '0.00' |
currency | รหัสสกุลเงิน ISO 4217 (เช่น USD, EUR, PHP) รองรับตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก สามารถเปลี่ยนสกุลเงินแบบไดนามิกได้ตลอดเวลา | String | 'PHP' |
pre-selected-currency | เลิกใช้แล้ว: ใช้ prop `currency` แทน รหัสสกุลเงิน ISO 4217 เริ่มต้น (เช่น USD, EUR) | String | 'PHP' |
disabled | ปิดใช้งานอินพุตสกุลเงินทั้งหมด (รวมถึงตัวเลือกสกุลเงิน) | Boolean | false |
disabled-country-currency | ปิดใช้งานเฉพาะตัวเลือกสกุลเงินขณะให้ฟิลด์ข้อความทำงานต่อ | Boolean | false |
auto-format | นำไปใช้ตัวคั่นหลักพันโดยอัตโนมัติ (และจำกัดทศนิยม) เมื่อเบลอและขณะที่พิมพ์ (ที่ถูกต้อง) | Boolean | false |
max-decimals | จำนวนสูงสุดของหลักทศนิยมที่จะรักษาไว้เมื่อจัดรูปแบบ | Number | 2 |
min-decimals | จำนวนทศนิยมขั้นต่ำ (ปัจจุบันไม่มีการเติมรหัสอัตโนมัติ) | Number | 2 |
base-value | ค่าตัวเลขเริ่มต้นที่จะใช้เมื่ออินพุตว่างเมื่อเบลอ หากตั้งค่าไว้ การลบอินพุตจะคืนค่านี้เมื่อสูญเสียโฟกัส | Number | undefined |
display-as-code | เมื่อเป็นจริง จะแสดงรหัสสกุลเงิน (เช่น USD); เมื่อเป็นเท็จ จะแสดงสัญลักษณ์ (หรือรหัสหากสัญลักษณ์คลุมเครือ) | Boolean | true |
display-as-symbol | เมื่อเป็นจริง จะแสดงสัญลักษณ์สกุลเงิน (เช่น $, €) โดยไม่คำนึงถึงการตั้งค่าอื่นๆ ลำดับความสำคัญสูงกว่า display-as-code | Boolean | false |
disable-rounding | เมื่อเป็นจริง หลักทศนิยมจะถูกตัด (ไม่ปัดเศษ) ให้เป็นทศนิยมสูงสุดที่อนุญาต | Boolean | false |
สำหรับ props ที่แชร์ อีเวนต์ สล็อต และการทำงานอื่นๆ ที่สืบทอดมาจากองค์ประกอบอินพุตพื้นฐาน โปรดดู การอ้างอิง API ขององค์ประกอบอินพุต
อีเวนต์
| อีเวนต์ | เพย์โหลด | คำอธิบาย |
|---|---|---|
| @update:model-value | String | ปล่อยออกมาทุกครั้งที่ค่าอินพุตที่ผูกมัดเปลี่ยนไป (การผูกมัดแบบสองทาง) |
| @get-selected-currency-meta | { currency: String; symbol: String; numericValue: Number | null; rawValue: String | null } | ปล่อยออกมาหลังจากเลือกสกุลเงิน และเบลอ รวมถึงรหัส สัญลักษณ์ (หรือรหัสหากคลุมเครือ) numericValue (float ที่แยกวิเคราะห์) และ rawValue (สตริงที่ไม่มีการจัดรูปแบบบัญญัติ) |
| @get-currency-value | Number | null | ค่าตัวเลขที่แยกวิเคราะห์ ปล่อยออกมาขณะพิมพ์ เมื่อเบลอ เมื่อเปลี่ยนสกุลเงิน และเมื่อติดตั้ง (หากมีค่าเริ่มต้น) ปล่อยออกมาเป็น null สำหรับอินพุตว่าง ให้การเข้าถึงโดยตรงไปยังค่าตัวเลขโดยไม่ต้องแปลงสตริง |