ระบบการออกแบบ Sprout

ไทย

English

ไทย

English

Appearance

เลือก ​

เลือกเป็นคอมโพเนนต์เชิงโต้ตอบที่อนุญาตให้ผู้ใช้เลือกจากรายการตัวเลือก

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

V-Model: ""
vue
<template>
  <spr-select
    id="select-basic"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
  { text: 'Fig', value: 'fig' },
  { text: 'Grape', value: 'grape' },
  { text: 'Nectarine', value: 'nectarine' },
  { text: 'Orange', value: 'orange' },
  { text: 'Papaya', value: 'papaya' },
  { text: '89 Quince', value: '50' },
]);
</script>

จัดกลุ่มรายการตาม ​

คุณสามารถจัดกลุ่มรายการตามลำดับ 'default', 'A-Z' หรือ 'Z-A' โดยส่งพร็อพส์ group-items-by และระบุประเภทการจัดกลุ่มที่ต้องการ

vue
<template>
  <div class="spr-grid spr-gap-4">
    <spr-select
      id="select-grouped-items-by"
      v-model="selectModel"
      label="ป้ายกำกับเลือก"
      placeholder="เลือกตัวเลือก"
      :options="options"
      group-items-by="A-Z"
    />
  </div>
</template>

ค้นหา ​

คุณลักษณะการค้นหาช่วยให้ผู้ใช้กรองและค้นหาตัวเลือกเฉพาะภายในรายการเลือกได้อย่างรวดเร็วโดยพิมพ์คำค้นหา

  • ใช้พร็อพส์ searchable-options เพื่อเปิดใช้งานช่องป้อนการค้นหาภายในคอมโพเนนต์เลือก
V-Model: ""
vue
<template>
  <spr-select
    id="select-search"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    searchable
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
  { text: 'Fig', value: 'fig' },
  { text: 'Grape', value: 'grape' },
  { text: 'Nectarine', value: 'nectarine' },
  { text: 'Orange', value: 'orange' },
  { text: 'Papaya', value: 'papaya' },
  { text: '89 Quince', value: '50' },
]);
</script>

คุณสามารถปิดใช้งานการค้นหาในเครื่องโดยส่งพร็อพส์ disabled-local-search สิ่งนี้มีประโยชน์เมื่อคุณต้องการจัดการการค้นหาผ่าน API เท่านั้น และไม่กรองตัวเลือกในเครื่อง

ใช้ @searchString emit เพื่อรับสตริงการค้นหาเมื่อผู้ใช้พิมพ์ในช่องป้อนการค้นหา สิ่งนี้ช่วยให้คุณจัดการตรรกะการค้นหาภายนอก เช่น การดึงตัวเลือกจาก API ตามคำค้นหา

V-Model: ""
vue
<template>
  <spr-select
    id="select-search-disabled-local-search"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    searchable
    disabled-local-search
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
  { text: 'Fig', value: 'fig' },
  { text: 'Grape', value: 'grape' },
  { text: 'Nectarine', value: 'nectarine' },
  { text: 'Orange', value: 'orange' },
  { text: 'Papaya', value: 'papaya' },
  { text: '89 Quince', value: '50' },
]);
</script>

ตัวเลือกที่เลือกไว้ล่วงหน้า ​

ตัวเลือกที่เลือกไว้ล่วงหน้านี้เป็นตัวเลือกที่ถูกเลือกโดยอัตโนมัติเมื่อแสดงการเลือกครั้งแรก v-model สำหรับคอมโพเนนต์เลือกสนับสนุน:

  • String: สำหรับการเลือกเดียวโดยค่า (เช่น 'apple')
  • Number: สำหรับการเลือกเดียวโดยค่าตัวเลข (เช่น 42)
  • Array of strings or numbers: สำหรับการเลือกเดียวโดยอาร์เรย์ (เช่น ['apple'] หรือ [42])
  • Object: สำหรับการเลือกเดียวโดยการอ้างอิงออบเจ็กต์ (เช่น { text: 'Apple', value: 'apple' }) ดูเพิ่มเติมใน Supported Value Types
V-Model: apple
vue
<template>
  <div class="spr-grid spr-gap-4">
    <spr-select
      id="select-pre-selected-items"
      v-model="selectModel"
      label="ป้ายกำกับเลือก"
      placeholder="เลือกตัวเลือก"
      :options="options"
      group-items-by="A-Z"
    />
  </div>
</template>

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

const selectModel = ref(['apple']);
</script>

คุณยังสามารถเลือกตัวเลือกไว้ล่วงหน้าด้วยฟังก์ชันการค้นหาได้ สิ่งนี้ช่วยให้ผู้ใช้เห็นตัวเลือกที่เลือกไว้ล่วงหน้าได้ขณะที่ยังคงสามารถค้นหาผ่านตัวเลือกได้

การจัดตำแหน่ง ​

การจัดตำแหน่งหมายถึงตำแหน่งที่ป๊อปเปอร์ของการเลือกจะอยู่สัมพันธ์กับองค์ประกอบทริกเกอร์ (เช่น ปุ่ม ช่องป้อนข้อมูล) ส่งพร็อพส์ placement เพื่อแก้ไขการจัดตำแหน่งของป๊อปเปอร์ของการเลือก

ตัวเลือกการจัดตำแหน่งที่มีอยู่คือ: auto, auto-start, auto-end, top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, และ left-end

การจัดตำแหน่งเริ่มต้นคือ bottom

ล้างได้ ​

คุณลักษณะล้างได้ช่วยให้ผู้ใช้ลบค่าที่เลือกออกจากช่องป้อนเลือกได้อย่างง่ายดาย สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับแบบฟอร์มที่ผู้ใช้อาจต้องการรีเซ็ตการเลือกของตนโดยไม่ต้องเปิดการเลือก

V-Model: ""

ความกว้างและความกว้างป๊อปเปอร์ ​

คุณสามารถแก้ไขความกว้างของคอมโพเนนต์เลือกได้สองวิธี: โดยการปรับความกว้างของตัวครอบการเลือกหรือโดยการเปลี่ยนความกว้างของป๊อปเปอร์ของการเลือก

Width - ความกว้างโดยรวมขององค์ประกอบครอบทั้งหมดและองค์ประกอบป๊อปเปอร์

Popper Width - ความกว้างขององค์ประกอบป๊อปเปอร์เท่านั้น

vue
<template>
  <spr-select
    id="select-width"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    width="50%"
    popper-width="200px"
  />
</template>

กลยุทธ์ป๊อปเปอร์ ​

กลยุทธ์ป๊อปเปอร์ใช้เป็นหลักเมื่อทำงานกับองค์ประกอบเช่นโมดอล มันช่วยควบคุมพฤติกรรมการจัดตำแหน่งขององค์ประกอบป๊อปเปอร์ กลยุทธ์ช่วยให้องค์ประกอบป๊อปเปอร์ถูกจัดตำแหน่งแบบไดนามิกตามวิวพอร์ต องค์ประกอบอ้างอิง หรือปัจจัยอื่นๆ เช่น การเลื่อนหรือการปรับขนาด

โดยค่าเริ่มต้น กลยุทธ์ป๊อปเปอร์ถูกตั้งค่าเป็น absolute ซึ่งจัดตำแหน่งองค์ประกอบป๊อปเปอร์สัมพันธ์กับบรรพบุรุษที่จัดตำแหน่งที่ใกล้ที่สุด (โดยปกติคือองค์ประกอบ body) อย่างไรก็ตาม คุณสามารถเปลี่ยน strategy เป็น fixed ซึ่งจัดตำแหน่งองค์ประกอบป๊อปเปอร์สัมพันธ์กับวิวพอร์ต เพื่อให้แน่ใจว่ามันยังคงอยู่ในตำแหน่งเดิมแม้ว่าจะเลื่อนหน้าเว็บ

ส่งพร็อพส์ popper-strategy เพื่อเปลี่ยนพฤติกรรมตำแหน่งของป๊อปเปอร์

สิ่งสำคัญที่ต้องทราบ:

อย่าลืมส่งพร็อพส์ wrapperPosition เพื่อแทนที่ตำแหน่ง relative เป็น initial

vue
<template>
  <spr-button tone="success" @click="modalModel = true">เปิดโมดอล</spr-button>

  <spr-modal v-model="modalModel" title="เลือกด้วยโมดอล">
    <spr-select
      id="select-popper-strategy"
      v-model="selectModel"
      label="ป้ายกำกับเลือก"
      placeholder="เลือกตัวเลือก"
      :options="options"
      popper-strategy="fixed"
      wrapper-position="initial"
    />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </p>
  </spr-modal>
</template>

คุณยังสามารถใช้พร็อพส์ popper-container เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบป๊อปเปอร์ได้ สิ่งนี้มีประโยชน์เมื่อคุณต้องการจำกัดบริบทการจัดตำแหน่งของป๊อปเปอร์ให้กับองค์ประกอบเฉพาะภายในแอปพลิเคชันของคุณ

เนื่องจากป๊อปเปอร์ถูกส่งไปยังคอนเทนเนอร์อื่น พร็อพส์ popper-width จะไม่ทำงานตามที่คาดหวัง เพื่อตั้งค่าความกว้างที่กำหนดเองสำหรับป๊อปเปอร์ในกรณีนี้ คุณสามารถใช้สไตล์ที่กำหนดเองหรือคลาส CSS เพื่อกำหนดความกว้างที่ต้องการ

vue
<template>
  <spr-dropdown
    id="dropdown-custom-popper"
    width="300px"
    :triggers="['hover', 'click']"
    :popper-triggers="['hover', 'click']"
    popper-width="500px"
    :auto-hide="false"
  >
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>ป๊อปเปอร์ที่กำหนดเองด้วยดร็อปดาวน์</span>
      <Icon icon="ph:caret-down" />
    </spr-button>
    <template #popper>
      <spr-select
        id="select-dropdown-custom-popper"
        v-model="selectModel"
        label="ป้ายกำกับเลือก"
        placeholder="เลือกตัวเลือก"
        :options="options"
        popper-strategy="fixed"
        popper-container="#dropdown-custom-popper"
        wrapper-position="relative"
        placement="bottom"
      />
    </template>
  </spr-dropdown>
</template>

เลื่อนไม่สิ้นสุด ​

เลื่อนไม่สิ้นสุดช่วยให้รายการเลือกโหลดรายการเพิ่มเติมเมื่อผู้ใช้เลื่อน สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการรวม API แบ็กเอนด์ แทนที่จะโหลดรายการทั้งหมดในครั้งเดียว รายการใหม่จะถูกเพิ่มแบบไดนามิกตามที่ต้องการเพื่อปรับปรุงประสิทธิภาพและการใช้งาน ส่ง @infinite-scroll-trigger emit เพื่อรับทริกเกอร์ของตัวเลือกเมื่อถึงด้านล่าง

เมื่อทำงานกับเลื่อนไม่สิ้นสุดและการเลือกที่ขับเคลื่อนด้วย API คุณสามารถใช้พร็อพส์ display-text เพื่อแสดงค่าการแสดงผลในช่องป้อนเมื่อโหลดครั้งแรก (ตัวอย่างเช่น เมื่อคุณมีเฉพาะค่าที่เลือกและไม่ได้ออบเจ็กต์ตัวเลือกทั้งหมด) สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับชุดข้อมูลขนาดใหญ่ที่คุณไม่ต้องการดึงตัวเลือกทั้งหมดในครั้งเดียว

ตัวเลือกที่มีการแบ่งหน้า - ควรโหลด 10 รายการต่อหน้า:

การแบ่งหน้า:

{
  "totalpages": 10,
  "currentPage": 1
}

ข้อมูล:

[]
vue
<template>
  <spr-select
    id="select-infinite-scroll"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsAPI"
    :display-text="displayText"
    @infinite-scroll-trigger="handleInfiniteScrollTrigger"
  />
</template>

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

const selectModel = ref(51); // ค่าเริ่มต้นสำหรับการเลือก
const displayText = ref('Border Terrier'); // ข้อความแสดงสำหรับตัวเลือกที่เลือก

const optionsAPI = ref<optionsType[]>([]);

const APIisLoading = ref(false);

const pagination = ref({
  totalpages: 10,
  currentPage: 1,
});

const setOptionsViaAPI = () => {
  getNextOptionsViaAPI();
};

const handleInfiniteScrollTrigger = () => {
  if (pagination.value.currentPage === pagination.value.totalpages || APIisLoading.value) return;

  APIisLoading.value = true;
  pagination.value.currentPage += 1;

  getNextOptionsViaAPI();
};

const getNextOptionsViaAPI = async () => {
  try {
    const response = await fetch(`https://api.thedogapi.com/v1/breeds?page=${pagination.value.currentPage}&limit=10`);

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const options = await response.json();

    optionsAPI.value = options.length
      ? [
          ...(optionsAPI.value || []),
          ...options.map((option) => ({
            text: option.name,
            value: option.id,
          })),
        ]
      : [];

    APIisLoading.value = false;
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
};
</script>

สถานะใช้งานอยู่ ปิดใช้งาน และข้อผิดพลาด ​

สำหรับคำแนะนำในการใช้สถานะข้อผิดพลาด สถานะใช้งานอยู่ และสถานะปิดใช้งานในคอมโพเนนต์เลือก คุณสามารถดูเอกสารสำหรับคอมโพเนนต์ข้อความป้อนข้อมูลได้เนื่องจากแนวทางนั้นคล้ายกัน ดู Input Form สำหรับคำแนะนำโดยละเอียด

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

vue
<template>
  <spr-select
    id="select-active-state"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    active
  />
</template>

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

vue
<template>
  <spr-select
    id="select-disabled-state"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    disabled
  />
</template>

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

vue
<template>
  <spr-select
    id="select-error-state"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    error
  />
</template>

Avatar ​

คุณลักษณะอวตารช่วยให้คุณแสดงรูปภาพอวตารเล็กๆ ข้างช่องป้อนเลือก สิ่งนี้สามารถมีประโยชน์ในการให้บริบทเพิ่มเติมหรือการระบุตัวตนทางภาพสำหรับการเลือก

ใช้พร็อพส์ avatar-variant เพื่อระบุประเภทอวตาร: user, user-light, building, building-light

vue
<template>
  <spr-select
    id="select-basic"
    v-model="selectModel.selectBasic"
    label="Select Label"
    placeholder="Select an option"
    avatar-variant="building-light"
    :options="options"
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
]);
</script>

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

ข้อความช่วยเหลือเป็นป้ายข้อความใต้ช่องป้อนข้อมูลที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำ การจัดรูปแบบ คำติชมการตรวจสอบ ฯลฯ

เพื่อแสดงข้อความช่วยเหลือ ตั้งค่าพร็อพส์ display-helper เป็น true และเพิ่มพร็อพส์ helper-text ด้วยข้อความช่วยเหลือ คุณยังสามารถแทรกไอคอนด้วยพร็อพส์ helper-icon ได้ สิ่งนี้ใช้ไลบรารีไอคอน Iconify

นี่คือข้อความช่วยเหลือ
นี่คือข้อความข้อผิดพลาด
vue
<template>
  <spr-select
    id="select-helper-message"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    helper-text="นี่คือข้อความช่วยเหลือ"
    display-helper
  />

  <spr-select
    id="select-helper-message-error"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    helper-text="นี่คือข้อความข้อผิดพลาด"
    helper-icon="ph:warning-circle-fill"
    display-helper
    error
  />
</template>

หรือคุณสามารถใช้สล็อต helperMessage เพื่อแสดงข้อความช่วยเหลือที่กำหนดเอง

นี่คือข้อความช่วยเหลือ
นี่คือข้อความข้อผิดพลาด
vue
<template>
  <spr-select
    id="select-helper-message-slot"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    display-helper
  >
    <template #helperMessage>นี่คือข้อความช่วยเหลือ</template>
  </spr-select>

  <spr-select
    id="select-helper-message-error-slot"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    display-helper
    error
  >
    <template #helperMessage>
      <icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>นี่คือข้อความข้อผิดพลาด</span>
    </template>
  </spr-select>
</template>

ประเภทค่าที่รองรับ ​

คอมโพเนนต์เลือกรองรับประเภทค่าต่างๆ v-model binding สามารถรับรูปแบบข้อมูลต่างๆ ขึ้นอยู่กับความต้องการของคุณ

ค่าพื้นฐานเดียว ​

สำหรับการเลือกเดียวของประเภทพื้นฐานเช่นสตริงหรือตัวเลข:

ค่า: apple

ค่า: 42

vue
<template>
  <spr-select
    id="select-string"
    v-model="stringValue"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="stringoptions"
  />

  <spr-select
    id="select-number"
    v-model="numberValue"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="numberoptions"
  />
</template>

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

// สำหรับค่าตัวอักษร
const stringValue = ref('apple'); // ค่าตัวอักษรเดียว

// สำหรับค่าตัวเลข
const numberValue = ref(42); // ค่าตัวเลขเดียว

const stringoptions = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
]);

const numberoptions = ref([
  { text: '42', value: 42 },
  { text: '100', value: 100 },
  { text: '200', value: 200 },
]);
</script>

ค่าออบเจ็กต์เดียว ​

สำหรับการเลือกเดียวของออบเจ็กต์ทั้งหมด:

ค่า: { "id": 1, "name": "John", "role": "Developer" }

vue
<template>
  <spr-select
    id="select-object"
    v-model="selectedUser"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="userList"
    text-field="name"      // ระบุฟิลด์ที่จะใช้แสดงเป็นข้อความ
    value-field="id"       // ระบุฟิลด์ที่จะใช้เป็นค่า
  />
</template>

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

// การเลือกออบเจ็กต์โดยใช้การอ้างอิงออบเจ็กต์ทั้งหมด
const selectedUser = ref({ id: 1, name: 'John', role: 'Developer' });

const userList = ref([
  { id: 1, name: 'John', role: 'Developer' },
  { id: 2, name: 'Jane', role: 'Designer' },
  { id: 3, name: 'Bob', role: 'Manager' }
]);
</script>

ข้อความรองของรายการ ​

คุณลักษณะข้อความรองของรายการช่วยให้คุณแสดงข้อมูลเพิ่มเติมใต้ข้อความหลักของแต่ละตัวเลือกในรายการเลือก สิ่งนี้สามารถมีประโยชน์ในการให้บริบทหรือรายละเอียดเกี่ยวกับแต่ละตัวเลือก ใช้พร็อพส์ subtext ในอาร์เรย์ตัวเลือกเพื่อระบุข้อความรองสำหรับแต่ละตัวเลือก

vue
<template>
  <spr-select
    id="select-item-subtext"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsWithSubtext"
  />
</template>

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

const selectModel = ref('');

const optionsWithSubtext = ref([
  { text: 'Apple', value: 'apple', subtext: 'ผลไม้สีแดงหวาน' },
  { text: 'Banana', value: 'banana', subtext: 'ผลไม้สีเหลืองยาว' },
  { text: 'Cherry', value: 'cherry', subtext: 'ผลไม้สีแดงเล็ก' },
  { text: 'Date', value: 'date', subtext: 'ผลไม้สีน้ำตาลหวาน' },
  { text: 'Elderberry', value: 'elderberry', subtext: 'ผลไม้สีม่วงเข้มเล็ก' },
]);
</script>

ไอคอนรายการ ​

คุณลักษณะไอคอนรายการช่วยให้คุณแสดงไอคอนควบคู่กับข้อความของแต่ละตัวเลือกในรายการเลือก สิ่งนี้สามารถช่วยให้ผู้ใช้ระบุตัวเลือกได้อย่างรวดเร็วตามสัญญาณภาพ ใช้พร็อพส์ icon ในอาร์เรย์ตัวเลือกเพื่อระบุไอคอนสำหรับแต่ละตัวเลือก

ไอคอนใช้ไอคอน phosphor จาก Iconify

vue
<template>
  <spr-select
    id="select-item-icon"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    item-icon="ph:alarm"
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
]);
</script>

ไอคอนรายการที่กำหนดเอง ​

คุณลักษณะไอคอนรายการที่กำหนดเองช่วยให้คุณแสดงไอคอนต่างๆ สำหรับแต่ละตัวเลือกในรายการเลือก สิ่งนี้มีประโยชน์ในการให้การแสดงภาพที่ไม่ซ้ำกันสำหรับแต่ละตัวเลือก เพิ่มพร็อพส์ icon ในอาร์เรย์ตัวเลือกเพื่อระบุไอคอนที่กำหนดเองสำหรับแต่ละตัวเลือก

vue
<template>
  <spr-select
    id="select-item-custom-icon"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsWithCustomIcon"
  />
</template>

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

const selectModel = ref('');

const optionsWithCustomIcon = ref([
  { text: 'Acorn', value: 'acorn', icon: 'ph:acorn' },
  { text: 'Address Book', value: 'address book', icon: 'ph:address-book' },
  { text: 'Alarm', value: 'alarm', icon: 'ph:alarm' },
  { text: 'Angle', value: 'angle', icon: 'ph:angle' },
  { text: 'Apple Logo', value: 'apple logo', icon: 'ph:apple-logo' },
]);
</script>

ลอซเซนจ์รายการ ​

คุณลักษณะลอซเซนจ์รายการช่วยให้คุณแสดงลอซเซนจ์ (ป้าย) ที่มีสีควบคู่กับข้อความของแต่ละตัวเลือกในรายการเลือก สิ่งนี้สามารถมีประโยชน์ในการจัดหมวดหมู่หรือเน้นตัวเลือก

พร็อพส์ลอซเซนจ์อ้างอิง:

  • label: ป้ายข้อความที่แสดงภายในลอซเซนจ์
  • tone: โทนสีของลอซเซนจ์ โทนที่มีอยู่คือ: 'plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'
  • fill: บูลีนที่ระบุว่าลอซเซนจ์ควรมีพื้นหลังที่เต็ม (true) หรือสไตล์ที่ขีดเส้น (false)
  • removevalue: บูลีนที่ระบุว่าจะแสดงไอคอนลบภายในลอซเซนจ์ (true) หรือไม่ (false)
  • url: URL ของภาพอวตารที่จะแสดงภายในลอซเซนจ์
  • visible: บูลีนที่ระบุว่าลอซเซนจ์มองเห็นได้ (true) หรือซ่อน (false)
  • loading: บูลีนที่ระบุว่าจะแสดงสปินเนอร์การโหลดภายในลอซเซนจ์ (true) หรือไม่ (false)
  • icon: ไอคอนที่จะแสดงภายในลอซเซนจ์
  • postfixIcon: ไอคอนที่จะแสดงที่ส่วนท้ายของลอซเซนจ์
  • interactive: บูลีนที่ระบุว่าลอซเซนจ์โต้ตอบได้ (true) หรือไม่ (false)
  • dropdown: บูลีนที่ระบุว่าจะแสดงลูกศรดร็อปดาวน์ภายในลอซเซนจ์ (true) หรือไม่ (false)

แสดงรายการเป็นลอซเซนจ์ ​

เพิ่มพร็อพส์ lozenge เพื่อแสดงตัวเลือกที่เลือกเป็นลอซเซนจ์ในช่องป้อนเลือก จากนั้นหากคุณต้องการเปลี่ยนสไตล์ลอซเซนจ์สำหรับแต่ละตัวเลือก คุณสามารถใช้ lozengeProps เพื่อปรับแต่งลักษณะลอซเซนจ์

vue
<template>
  <spr-select
    id="select-display-item-lozenge"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    lozenge
  />
</template>

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

const selectModel = ref('');

const options = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Carrot', value: 'carrot' },
  { text: 'Bread', value: 'bread' },
  { text: 'Chicken', value: 'chicken' },
  { text: 'Milk', value: 'milk' },
]);
</script>

เพิ่มลอซเซนจ์ ​

เพิ่มพร็อพส์ lozenge ในอาร์เรย์ตัวเลือกเพื่อระบุลอซเซนจ์สำหรับแต่ละตัวเลือก

vue
<template>
  <spr-select
    id="select-item-lozenge"
    v-model="selectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsWithLozenge"
  />
</template>

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

const selectModel = ref('');

const optionsWithLozenge = ref([
  {
    text: 'Apple',
    value: 'apple',
    lozenge: { label: 'Fruit', tone: 'plain' },
  },
  {
    text: 'Carrot',
    value: 'carrot',
    lozenge: { label: 'Vegetable', tone: 'pending' },
  },
  {
    text: 'Bread',
    value: 'bread',
    lozenge: { label: 'Grain', tone: 'information' },
  },
  {
    text: 'Chicken',
    value: 'chicken',
    lozenge: { label: 'Protein', tone: 'success' },
  },
  {
    text: 'Milk',
    value: 'milk',
    lozenge: { label: 'Dairy', tone: 'danger' },
  },
  {
    text: 'Eggs',
    value: 'eggs',
    lozenge: { label: 'Poultry', tone: 'neutral' },
  },
  {
    text: 'Fish',
    value: 'fish',
    lozenge: { label: 'Seafood', tone: 'caution' },
  },
]);
</script>

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

ชื่อคำอธิบายประเภทค่าเริ่มต้น
idจำเป็นเพื่อผูกป๊อปเปอร์ภายในการเลือกString-
v-modelการผูกค่าของการเลือก ยอมรับ:
  • ค่าพื้นฐานเดียว: String ('apple'), Number (42)
  • ค่าออบเจ็กต์เดียว: ออบเจ็กต์ทั้งหมด ({ id: 1, name: 'John' })
  • อาร์เรย์ของค่า: อาร์เรย์ของสตริง, ตัวเลข, หรือออบเจ็กต์
ประเภทค่าที่ส่งคืนจะตรงกับประเภทป้อนข้อมูล (รักษาสตริง, ตัวเลข, และออบเจ็กต์) 		String | Number | Object | Array[]
optionsรายการตัวเลือกที่ประกอบด้วยพร็อพส์ text และ value, หรืออาร์เรย์ของสตริง/ออบเจ็กต์optionsType[] | string[] | object[][]
group-items-byจัดกลุ่มรายการตามลำดับ: 'A-Z', 'Z-A''A-Z' | 'Z-A'-
text-fieldชื่อฟิลด์ที่จะใช้สำหรับข้อความแสดงเมื่อใช้อาร์เรย์ออบเจ็กต์ไดนามิกString'text'
value-fieldชื่อฟิลด์ที่จะใช้สำหรับค่าเมื่อใช้อาร์เรย์ออบเจ็กต์ไดนามิกString'value'
display-textข้อความแสดงเพื่อแสดงในช่องป้อนเมื่อโหลดครั้งแรก (มีประโยชน์สำหรับการเลือกที่ขับเคลื่อนด้วย API) ค่าจะแสดงเพียงครั้งเดียว และจะถูกแทนที่เมื่อผู้ใช้เลือกใหม่String-
placeholderข้อความตัวยึดตำแหน่งสำหรับช่องป้อนString-
labelป้ายกำกับสำหรับช่องป้อนเลือกString''
supporting-labelข้อความข้างป้ายกำกับที่มีสไตล์สนับสนุนstring''
input-loaderแสดงสปินเนอร์การโหลดภายในช่องป้อนเลือก มีประโยชน์ขณะดึงตัวเลือกแบบอะซิงโครนัส (เช่น การค้นหา API) เมื่อเป็นจริง ค่าปัจจุบันหรือตัวยึดตำแหน่งจะยังคงแสดงพร้อมตัวบ่งชี้สปินเนอร์Booleanfalse
placementการจัดตำแหน่งของป๊อปเปอร์เลือก (เช่น 'bottom', 'top', 'left', 'right')String'bottom'
searchable ค้นหาได้เพื่ออนุญาตให้พิมพ์ในช่องป้อน หากไม่ได้ตั้งค่าการค้นหาหรือเป็นเท็จ, ช่องป้อนจะเป็นแบบอ่านอย่างเดียวและผู้ใช้ไม่สามารถพิมพ์ได้ Booleanfalse
disabled-local-search ปิดใช้งานการค้นหาในเครื่องเมื่อตั้งค่าพร็อพส์การค้นหาเป็นจริง สิ่งนี้มีประโยชน์เมื่อคุณต้องการจัดการการค้นหาผ่าน API เท่านั้น Booleanfalse
triggersอาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ดร็อปดาวน์ให้เปิด'click' | 'hover' | 'focus' | 'touch'[]['click']
popper-triggersอาร์เรย์ของอีเวนต์ที่จะทริกเกอร์เมนูดร็อปดาวน์ (องค์ประกอบป๊อปเปอร์) ให้เปิด'click' | 'hover' | 'focus' | 'touch'[][]
popper-strategyกำหนดวิธีการจัดตำแหน่งป๊อปเปอร์ของการเลือก: 'absolute' หรือ 'fixed'String'absolute'
popper-widthความกว้างของป๊อปเปอร์ของการเลือกString'100%'
popper-containerซีเลกเตอร์ CSS หรือ HTMLElement เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบป๊อปเปอร์String | HTMLElement''
auto-hideเมื่อเป็นจริง จะซ่อนดร็อปดาวน์โดยอัตโนมัติเมื่อคลิกภายนอกBooleantrue
widthความกว้างของตัวครอบคอมโพเนนต์เลือกString'100%'
wrapper-positionCSS position ของตัวครอบการเลือกString'relative'
disabledปิดใช้งานการเลือกหากเป็นจริงBooleanfalse
clearableอนุญาตให้ผู้ใช้ล้างค่าที่เลือกด้วยปุ่มล้างBooleanfalse
options-loaderแสดงการโหลดแบบโครงกระดูกภายในป๊อปเปอร์ มีประโยชน์ขณะดึงตัวเลือกแบบอะซิงโครนัส (เช่น การค้นหา API)Booleanfalse
infinite-scroll-loaderแสดงสปินเนอร์การโหลดที่ด้านล่างของรายการเมื่อทริกเกอร์เลื่อนไม่สิ้นสุด มีประโยชน์เมื่อโหลดรายการเพิ่มเติมเมื่อผู้ใช้เลื่อนถึงส่วนท้ายของรายการBooleanfalse
lozengeเปิดใช้งานโหมดลอซเซนจ์สำหรับรายการ รายการจะแสดงเป็นลอซเซนจ์เมื่อเปิดใช้งานBooleanfalse
item-iconไอคอนใดๆ จาก iconify (เช่น ph:trash)String''

อีเวนต์ ​

อีเวนต์เพย์โหลดคำอธิบาย
@update:model-valueAnyอีเวนต์ที่ปล่อยออกมาทุกครั้งที่ค่ามอดเดลเปลี่ยนแปลง
@infinite-scroll-triggerNoneอีเวนต์ที่ปล่อยออกมาทุกครั้งที่การเลือกถูกเลื่อนถึงด้านล่าง (สำหรับการโหลดข้อมูลแบบไดนามิก)
@search-stringNoneอีเวนต์ที่ปล่อยออกมาทุกครั้งที่คุณพิมพ์ในช่องป้อนการค้นหา
@get-selected-optionObjectอีเวนต์ที่ปล่อยออกมาเพื่อรับตัวเลือกที่เลือก
@popper-stateBoleanอีเวนต์ที่ปล่อยออกมาทุกครั้งที่คุณเปิดหรือปิดป๊อปเปอร์

เมธอดที่เปิดเผย ​

เมธอดคำอธิบายพารามิเตอร์
handleClearล้างการเลือกปัจจุบัน()

การใช้ผลิตภัณฑ์ ​

Sprout HR
Sprout Sidekick

ลิขสิทธิ์ © 2025 วิศวกร Frontend ของ Sprout