ช่องป้อนอีเมล

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

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

อีเมล

<template>
  <spr-input-email v-model="inputModel" label="อีเมล" placeholder="ป้อนอีเมล" />
</template>

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

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

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

อีเมล

<template>
  <spr-input-email v-model="inputModel" label="อีเมล" placeholder="ป้อนอีเมล" active />
</template>

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

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

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

อีเมล

<template>
  <spr-input-email v-model="inputModel" label="อีเมล" placeholder="ป้อนอีเมล" :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-email>
</template>

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

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

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

อีเมล

<template>
  <spr-input-email v-model="inputModel" label="อีเมล" placeholder="ป้อนอีเมล" :disabled="true" />
</template>

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

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

การอ้างอิง API

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

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

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