ช่องป้อนหมายเลขติดต่อ

คอมโพเนนต์นี้ใช้ libphonenumber-js เพื่อแยกวิเคราะห์และจัดรูปแบบการป้อนข้อมูลเมื่อเลือนออก
ช่องป้อนหมายเลขติดต่อระหว่างประเทศด้วยตัวเลือกประเทศและการตรวจสอบ

ใช้ libphonenumber-js ภายในสำหรับการแยกวิเคราะห์และการจัดรูปแบบเมื่อเลือนออก

การใช้งานพื้นฐาน

vue

<template>
  <spr-input-contact-number id="input-contact-number-basic" v-model="inputModel" label="ช่องป้อนหมายเลขติดต่อ" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

สถานะใช้งานอยู่

ช่องป้อนหมายเลขติดต่อ

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-active-state"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    active
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

สถานะข้อผิดพลาด

ช่องป้อนหมายเลขติดต่อ

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-error-state"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    error
  >
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-contact-number>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

สถานะปิดใช้งาน

ช่องป้อนหมายเลขติดต่อ

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-disabled-state"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    disabled
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

ปิดใช้งานรหัสประเทศที่โทร

ช่องป้อนหมายเลขติดต่อ

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-disabled-country-calling-code"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    :disabled-country-calling-code="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

รับรหัสประเทศที่เลือก

ช่องป้อนหมายเลขติดต่อ

เอาต์พุตโมเดล:

รหัสประเทศที่เลือก:

รหัสประเทศที่โทรที่เลือก:

การจัดการข้อผิดพลาด: []

หมายเลขระหว่างประเทศที่แยกวิเคราะห์:

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-selected-country-codes"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    @get-selected-country-calling-code="handleCodes"
    @get-contact-number-errors="handleErrors"
    @get-parsed-international-number="handleParsedNumber"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
const selectedCountry = ref('');
const selectedCalling = ref('');
const errors = ref([]);
const parsedNumber = ref('');

const handleCodes = (val: { countryCode: string; countryCallingCode: string }) => {
  selectedCountry.value = val.countryCode;
  selectedCalling.value = val.countryCallingCode;
};

const handleErrors = (val: { title: string; message: string }[]) => {
  errors.value = val;
};

const handleParsedNumber = (val: string) => {
  parsedNumber.value = val;
};
</script>

ตั้งรหัสประเทศที่เลือกไว้ล่วงหน้า

ช่องป้อนหมายเลขติดต่อ

vue

<template>
  <spr-input-contact-number
    id="input-contact-number-preselected-country"
    v-model="inputModel"
    label="ช่องป้อนหมายเลขติดต่อ"
    pre-selected-country-code="US"
  />
</template>

แสดงข้อความช่วยเหลือ

แสดงข้อความช่วยเหลือหรือข้อความแสดงข้อผิดพลาดด้านล่างช่องป้อนข้อมูลโดยใช้พร็อพส์ display-helper, helper-text, helper-icon และ error คุณยังสามารถปรับแต่งข้อความช่วยเหลือด้วยสล็อต

ข้อความช่วยเหลือ

ช่องป้อนหมายเลขติดต่อ

ป้อนหมายเลขโทรศัพท์ระหว่างประเทศที่ถูกต้อง

สถานะข้อผิดพลาดพร้อมช่วยเหลือ

ช่องป้อนหมายเลขติดต่อ

รูปแบบหมายเลขโทรศัพท์ไม่ถูกต้อง

ข้อความช่วยเหลือแบบกำหนดเอง

ช่องป้อนหมายเลขติดต่อ

ป้อนหมายเลขพร้อมรหัสประเทศนำหน้า

0 อักขระ

vue

<template>
  <div class="spr-grid spr-gap-4">
    <!-- ข้อความช่วยเหลือ -->
    <spr-input-contact-number
      id="input-contact-number-helper-text"
      v-model="inputModel"
      label="ช่องป้อนหมายเลขติดต่อ"
      display-helper
      helper-text="ป้อนหมายเลขโทรศัพท์ระหว่างประเทศที่ถูกต้อง"
    />

    <!-- สถานะข้อผิดพลาดพร้อมช่วยเหลือ -->
    <spr-input-contact-number
      id="input-contact-number-error-helper"
      v-model="inputModel"
      label="ช่องป้อนหมายเลขติดต่อ"
      display-helper
      helper-icon="ph:warning-circle-fill"
      helper-text="รูปแบบหมายเลขโทรศัพท์ไม่ถูกต้อง"
      error
    />

    <!-- ข้อความช่วยเหลือแบบกำหนดเอง -->
    <spr-input-contact-number
      id="input-contact-number-custom-helper"
      v-model="inputModel"
      label="ช่องป้อนหมายเลขติดต่อ"
      display-helper
      helper-icon="ph:info-fill"
      helper-text="ข้อมูลหมายเลขโทรศัพท์"
    >
      <template #helperMessage>
        <div class="spr-flex spr-w-full spr-justify-between spr-gap-2">
          <div class="spr-body-sm-regular spr-flex spr-items-center spr-gap-1">
            <Icon class="spr-min-h-5 spr-min-w-5" icon="ph:info-fill" />
            <span>ป้อนหมายเลขพร้อมรหัสประเทศนำหน้า</span>
          </div>
          <div class="spr-body-sm-regular">{{ inputModel.length }} อักขระ</div>
        </div>
      </template>
    </spr-input-contact-number>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';

const inputModel = ref('');
</script>

การอ้างอิง API

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`id`	รหัสเฉพาะสำหรับคอมโพเนนต์	String	`''`
`v-model`	ค่าอินพุตปัจจุบัน (ไม่ได้จัดรูปแบบ) อัปเดตเมื่อผู้ใช้ป้อนข้อมูลและเหตุการณ์การจัดรูปแบบ	String	`''`
`placeholder`	ข้อความตัวยึดตำแหน่งที่แสดงเมื่ออินพุตว่างเปล่า	String	`'Enter Phone Number'`
`pre-selected-country-code`	รหัสประเทศ ISO 3166-1 alpha-2 เริ่มต้นที่ใช้เพื่อรับรหัสการโทรเริ่มต้น (เช่น `PH`, `US`)	String	`'PH'`
`disabled`	ปิดใช้งานช่องป้อนหมายเลขติดต่อทั้งหมด (รวมถึงตัวเลือกประเทศ)	Boolean	`false`
`disabled-country-calling-code`	ปิดใช้งานตัวเลือกรหัสประเทศที่โทรเท่านั้น ขณะที่ยังคงทำให้ช่องหมายเลขโต้ตอบได้	Boolean	`false`
`display-helper`	เมื่อตั้งเป็น `true` จะแสดงข้อความช่วยเหลือด้านล่างช่องป้อนข้อมูล	Boolean	`false`
`helper-text`	ข้อความช่วยเหลือที่จะแสดงด้านล่างอินพุตเมื่อ `display-helper` เป็น `true` ให้บริบทหรือคำแนะนำเพิ่มเติมสำหรับผู้ใช้	String	`''`
`helper-icon`	ชื่อไอคอนที่จะแสดงถัดจากข้อความช่วยเหลือ ยอมรับชื่อไอคอนใดๆ จากไลบรารีไอคอน	String	`null`
`error`	เมื่อตั้งเป็น `true` จะแสดงอินพุตในสถานะข้อผิดพลาดด้วยข้อความสีแดงสำหรับข้อความช่วยเหลือ	Boolean	`false`

สำหรับพร็อพส์ อีเวนต์ สล็อต และพฤติกรรมที่ใช้ร่วมกันที่สืบทอดมาจากคอมโพเนนต์อินพุตฐาน โปรดดู การอ้างอิง API คอมโพเนนต์ Input

อีเวนต์

อีเวนต์	พารามิเตอร์	คำอธิบาย
@update:model-value	String	ปล่อยเมื่อค่าอินพุตดิบเปลี่ยนแปลง (รองรับการผูกสองทาง)
@get-selected-country-calling-code	{ countryCode: String; countryCallingCode: String }	ปล่อยหลังการเลือกประเทศเปลี่ยนแปลง ให้ทั้งรหัสประเทศ ISO และรหัสการโทร
@get-parsed-international-number	String	ปล่อยด้วยหมายเลขระหว่างประเทศแบบเต็ม (เช่น `+15551234567`) หลังตรรกะการจัดรูปแบบทำงาน
@get-contact-number-errors	Array<{ title: String; message: String }>	ปล่อยด้วยออบเจกต์ข้อผิดพลาดการตรวจสอบหากการแยกวิเคราะห์หรือการจัดรูปแบบตรวจพบปัญหา

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล

เรดิโอ

เลือก

ช่องป้อนหมายเลขติดต่อ

การใช้งานพื้นฐาน

สถานะใช้งานอยู่

สถานะข้อผิดพลาด

สถานะปิดใช้งาน

ปิดใช้งานรหัสประเทศที่โทร

รับรหัสประเทศที่เลือก

ตั้งรหัสประเทศที่เลือกไว้ล่วงหน้า

แสดงข้อความช่วยเหลือ

การอ้างอิง API

อีเวนต์

ช่องป้อนหมายเลขติดต่อ ​

การใช้งานพื้นฐาน ​

สถานะใช้งานอยู่ ​

สถานะข้อผิดพลาด ​

สถานะปิดใช้งาน ​

ปิดใช้งานรหัสประเทศที่โทร ​

รับรหัสประเทศที่เลือก ​

ตั้งรหัสประเทศที่เลือกไว้ล่วงหน้า ​

แสดงข้อความช่วยเหลือ ​

การอ้างอิง API ​

อีเวนต์ ​

ช่องป้อนหมายเลขติดต่อ

การใช้งานพื้นฐาน

สถานะใช้งานอยู่

สถานะข้อผิดพลาด

สถานะปิดใช้งาน

ปิดใช้งานรหัสประเทศที่โทร

รับรหัสประเทศที่เลือก

ตั้งรหัสประเทศที่เลือกไว้ล่วงหน้า

แสดงข้อความช่วยเหลือ

การอ้างอิง API

อีเวนต์