ช่องป้อน URL

ช่องป้อน URL ที่มีการตรวจสอบดั้งเดิมของเบราว์เซอร์สำหรับ URL ที่จัดรูปแบบอย่างถูกต้อง

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

เว็บไซต์

https://

<template>
  <spr-input-url v-model="inputModel" label="เว็บไซต์" placeholder="https://example.com" />
</template>

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

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

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

เว็บไซต์

https://

<template>
  <spr-input-url v-model="inputModel" label="เว็บไซต์" placeholder="https://example.com" active />
</template>

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

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

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

เว็บไซต์

https://

<template>
  <spr-input-url v-model="inputModel" label="เว็บไซต์" placeholder="https://example.com" :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-url>
</template>

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

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

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

เว็บไซต์

https://

การอ้างอิง API

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

การอ้างอิง API คอมโพเนนต์ Input

เฉพาะเจตนาด้านภาพ (บริบท URL) เท่านั้นที่แตกต่าง ไม่มีการเพิ่มพร็อพส์หรืออีเวนต์เฉพาะในขณะนี้

<template>
  <spr-input-url v-model="inputModel" label="เว็บไซต์" placeholder="https://example.com" :disabled="true" />
</template>

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

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