ช่องป้อนดรอปดาวน์

ตัวแปรช่องป้อนที่จัดสไตล์ใช้เป็นทริกเกอร์/แสดงภายในคอมโพเนนต์แบบดรอปดาวน์

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

ช่องป้อนดรอปดาวน์

<template>
  <spr-input-dropdown
    id="input-dropdown-basic"
    v-model="inputModel"
    label="ช่องป้อนดรอปดาวน์"
    placeholder="เลือกไอเทม ..."
    readonly
  />
</template>

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

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

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

ช่องป้อนดรอปดาวน์

<template>
  <spr-input-dropdown
    id="input-dropdown-active-state"
    v-model="inputModel"
    label="ช่องป้อนดรอปดาวน์"
    placeholder="เลือกไอเทม ..."
    active
    readonly
  />
</template>

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

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

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

ช่องป้อนดรอปดาวน์

การอ้างอิง API

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

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

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

<template>
  <spr-input-dropdown
    id="input-dropdown-error-state"
    v-model="inputModel"
    label="ช่องป้อนดรอปดาวน์"
    placeholder="เลือกไอเทม ..."
    error
    readonly
  >
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-dropdown>
</template>

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

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

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

ช่องป้อนดรอปดาวน์

<template>
  <spr-input-dropdown
    id="input-dropdown-disabled-state"
    v-model="inputModel"
    label="ช่องป้อนดรอปดาวน์"
    placeholder="เลือกไอเทม ..."
    disabled
  />
</template>

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

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