ช่องป้อนชื่อผู้ใช้
ช่องป้อนชื่อผู้ใช้เฉพาะที่มีกฎการตรวจสอบที่อาจมีในอนาคต
การใช้งานพื้นฐาน
vue
<template>
<spr-input-username v-model="inputModel" label="ชื่อผู้ใช้" placeholder="ป้อนชื่อผู้ใช้" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะใช้งานอยู่
vue
<template>
<spr-input-username v-model="inputModel" label="ชื่อผู้ใช้" placeholder="ป้อนชื่อผู้ใช้" active />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะข้อผิดพลาด
vue
<template>
<spr-input-username v-model="inputModel" label="ชื่อผู้ใช้" placeholder="ป้อนชื่อผู้ใช้" :error="true">
<template #icon>
<Icon icon="ph:warning-circle-fill" />
</template>
</spr-input-username>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>สถานะปิดใช้งาน
vue
<template>
<spr-input-username 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
เฉพาะเจตนาด้านภาพ (บริบทชื่อผู้ใช้) เท่านั้นที่แตกต่าง ไม่มีการเพิ่มพร็อพส์หรืออีเวนต์เฉพาะในขณะนี้