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

ไทย

English

ไทย

English

Appearance

เลือกหลายรายการ ​

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

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

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

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

    const multiSelectBasic = 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>
</template>

แบบชิป ​

เลือกตัวเลือก
V-Model: []
vue
<template>
  <spr-select-multiple
    id="select-multiple-chipped"
    v-model="multiSelectChipped"
    label="ป้ายกำกับเลือกหลายรายการ"
    placeholder="เลือกตัวเลือก"
    :options="options"
  />
</template>

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

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

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

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

const multiSelectGroupedItemsBy = 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 ควรเป็นอาร์เรย์ของค่า (สตริง ตัวเลข หรือออบเจ็กต์) ที่ตรงกับฟิลด์ value ของตัวเลือกของคุณ

V-Model: [ "100", "200", "cherry" ]
vue
<template>
  <spr-select-multiple
    id="select-multiple-preselected-items"
    v-model="multiSelectPreSelectedItems"
    label="เลือกผลไม้"
    placeholder="เลือกผลไม้อย่างน้อยหนึ่งชนิด"
    :options="options"
    group-items-by="A-Z"
  />
</template>

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

// เลือกหลายรายการไว้ล่วงหน้าโดยส่งอาร์เรย์ของค่า
const multiSelectPreSelectedItems = ref(['100', 200, 'cherry']);
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: 'Honeydew', value: 'honeydew' },
  { text: 'Indian Fig', value: 'indian_fig' },
  { text: 'Jackfruit', value: 'jackfruit' },
  { text: 'Kiwi', value: 'kiwi' },
  { text: 'One Hundred', value: '100' },
  { text: 'Two Hundred', value: 200 },
  { text: 'Lemon', value: 'lemon' },
  { text: 'Mango', value: 'mango' },
  { text: '300', value: '300' },
  { text: 'Nectarine', value: 'nectarine' },
  { text: 'Orange', value: 'orange' },
  { text: 'Papaya', value: 'papaya' },
  { text: '89 Quince', value: '50' },
  { text: 'Raspberry', value: 'raspberry' },
  { text: 'Strawberry', value: 'strawberry' },
  { text: 'Tangerine', value: 'tangerine' },
  { text: 'Uva', value: 'uva' },
  { text: 'Vanilla', value: 'vanilla' },
  { text: 'Watermelon', value: 'watermelon' },
  { text: 'Xigua', value: 'xigua' },
  { text: 'Yunnan Hackberry', value: 'yunnan_hackberry' },
  { text: 'Zucchini', value: 'zucchini' },
  { text: 'Apricot', value: 'apricot' },
  { text: 'Blueberry', value: 'blueberry' },
  { text: 'Cantaloupe', value: 'cantaloupe' },
  { text: 'Dragonfruit', value: 'dragonfruit' },
  { text: 'Pineapple', value: 'pineapple' },
]);
</script>

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

หมายเหตุ:

  • หากคุณต้องการเริ่มต้นโดยไม่มีการเลือกใดๆ ให้ใช้อาร์เรย์ว่าง: ref([])
  • หากคุณต้องการเลือกตัวเลือกทั้งหมดไว้ล่วงหน้า ให้ใช้อาร์เรย์ทั้งหมดของค่าจากตัวเลือกของคุณ
  • คอมโพเนนต์จะถือว่าโมเดลเป็นอาร์เรย์สำหรับการเลือกหลายรายการเสมอ ดังนั้นการสลับและการเลือกไว้ล่วงหน้าจะทำงานตามที่คาดหวัง

ค้นหา ​

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

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

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

const multiSelectModel = 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-multiple
    id="select-multiple-search-disabled-local-search"
    v-model="multiSelectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    searchable
    disabled-local-search
  />
</template>

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

const multiSelectModel = 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>

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

การจัดตำแหน่งหมายถึงตำแหน่งที่ป๊อปเปอร์ของการเลือกจะอยู่สัมพันธ์กับองค์ประกอบทริกเกอร์ (เช่น ปุ่ม ช่องป้อนข้อมูล) ส่งพร็อพส์ 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-multiple
    id="select-multiple-width"
    v-model="multiSelectModel"
    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-multiple
      id="select-multiple-popper-strategy"
      v-model="multiSelectModel"
      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-multiple
        id="select-multiple-dropdown-custom-popper"
        v-model="multiSelectModel"
        label="ป้ายกำกับเลือกหลายรายการ"
        placeholder="เลือกตัวเลือก"
        :options="options"
        popper-strategy="fixed"
        popper-container="#dropdown-custom-popper"
        wrapper-position="relative"
        placement="bottom"
      />
    </template>
  </spr-dropdown>
</template>

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

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

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

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

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

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

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

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

แสดงจำนวนที่เลือกเท่านั้น ​

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

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

แสดงรายการที่เลือกรายการในรายการ ​

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

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

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

const multiSelectModel = 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>

เลือกทั้งหมด / ยกเลิกการเลือกทั้งหมด ​

เมื่อใช้การเลือกหลายรายการพร้อมกับ prop allow-select-all ที่เปิดใช้งาน ปุ่ม "เลือกทั้งหมด" / "ยกเลิกการเลือกทั้งหมด" จะถูกจัดเตรียมโดยอัตโนมัติในดร็อปดาวน์ ปุ่มนี้ช่วยให้ผู้ใช้สามารถเลือกหรือยกเลิกการเลือกรายการที่มีอยู่ทั้งหมดในรายการได้อย่างรวดเร็ว

คุณสมบัติ: ​

  • การสลับอัตโนมัติ: ข้อความปุ่มจะเปลี่ยนโดยอัตโนมัติตามสถานะการเลือกปัจจุบัน
  • การเลือกอัจฉริยะ: เฉพาะรายการที่เปิดใช้งาน (ไม่ได้ปิดใช้งาน) เท่านั้นที่จะได้รับผลกระทบจากการดำเนินการเลือกทั้งหมด
  • ทำงานกับการกรอง: เมื่อรายการถูกกรองผ่านการค้นหา การเลือกทั้งหมดจะส่งผลกระทบต่อรายการที่มองเห็นได้เท่านั้น
  • ควบคุมด้วย Prop: ปรากฏขึ้นเฉพาะเมื่อเปิดใช้งาน allow-select-all
vue
<template>
  <spr-select-multiple
    id="select-multiple-allow-select-all"
    v-model="selectedItems"
    label="เลือกหลายรายการพร้อมเลือกทั้งหมด"
    placeholder="เลือกตัวเลือก"
    :options="options"
    searchable
    allow-select-all
    display-list-item-selected
  />
</template>

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

const selectedItems = 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: 'Honeydew', value: 'honeydew' },
]);
</script>

หมายเหตุ: ปุ่มเลือกทั้งหมดจะปรากฏขึ้นเมื่อเปิดใช้งาน allow-select-all รายการที่ปิดใช้งานจะถูกแยกออกโดยอัตโนมัติจากการดำเนินการเลือกทั้งหมด

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

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

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

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

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

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

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

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

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

คอมโพเนนต์ spr-select-multiple รองรับหลายประเภทค่า สำหรับการเลือกหลายรายการ ให้ใช้อาร์เรย์สำหรับ v-model เสมอ ไม่ว่าค่าของคุณจะเป็นสตริง ตัวเลข หรือออบเจ็กต์ คอมโพเนนต์จะปรับมาตรฐานค่าคุณค่าเดียวเป็นอาร์เรย์ภายใน แต่เป็นแนวทางปฏิบัติที่ดีที่สุดที่จะใช้อาร์เรย์ตั้งแต่แรก

ค่าตัวอักษรหลายค่า ​

vue
<template>
  <spr-select-multiple
    id="select-multiple-string"
    v-model="stringValues"
    label="เลือกผลไม้"
    placeholder="เลือกผลไม้"
    :options="stringOptions"
  />
</template>

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

const stringValues = ref(['apple', 'banana']); // ใช้อาร์เรย์สำหรับการเลือกหลายรายการเสมอ

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

ค่าตัวเลขหลายค่า ​

vue
<template>
  <spr-select-multiple
    id="select-multiple-number"
    v-model="numberValues"
    label="เลือกตัวเลข"
    placeholder="เลือกตัวเลข"
    :options="numberOptions"
  />
</template>

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

const numberValues = ref([42, 100]); // ใช้อาร์เรย์สำหรับการเลือกหลายรายการเสมอ

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

ค่าออบเจ็กต์หลายค่า ​

vue
<template>
  <spr-select-multiple
    id="select-multiple-object"
    v-model="selectedUsers"
    label="เลือกผู้ใช้"
    placeholder="เลือกผู้ใช้"
    :options="userList"
    text-field="name"
    value-field="id"
  />
</template>

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

const selectedUsers = ref([
  { id: 1, name: 'John', role: 'Developer' },
  { id: 2, name: 'Jane', role: 'Designer' },
]); // ใช้อาร์เรย์สำหรับการเลือกหลายรายการเสมอ

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

อวตาร ​

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

vue
<template>
  <spr-select-multiple
    id="select-multiple-item-icon"
    v-model="multiSelectModel.multiSelectItemIcon"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    avatar-variant="image"
    avatar-source="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
  />
</template>

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

const multiSelectModel = 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>

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

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

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

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

const multiSelectModel = 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-multiple
    id="select-multiple-item-icon"
    v-model="multiSelectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    item-icon="ph:alarm"
  />
</template>

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

const multiSelectModel = 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-multiple
    id="select-multiple-item-custom-icon"
    v-model="multiSelectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsWithCustomIcon"
  />
</template>

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

const multiSelectModel = 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-multiple
    id="select-multiple-display-item-lozenge"
    v-model="multiSelectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="options"
    lozenge
  />
</template>

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

const multiSelectModel = 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-multiple
    id="select-multiple-item-lozenge"
    v-model="multiSelectModel"
    label="ป้ายกำกับเลือก"
    placeholder="เลือกตัวเลือก"
    :options="optionsWithLozenge"
  />
</template>

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

const multiSelectModel = 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การผูกค่าของการเลือก ยอมรับอาร์เรย์ของสตริง, ตัวเลข, หรือออบเจ็กต์ ใช้อาร์เรย์สำหรับการเลือกหลายรายการเสมอArray[]
search-valueการผูกค่าของช่องป้อนการค้นหา ยอมรับสตริงString''
optionsรายการตัวเลือก สามารถเป็นอาร์เรย์ของสตริง, ตัวเลข, หรือออบเจ็กต์ที่มีฟิลด์ text และ valueArray[]
group-items-byจัดกลุ่มรายการตามฟิลด์เฉพาะ รองรับ: 'A-Z', 'Z-A'String-
text-fieldชื่อฟิลด์ที่จะใช้สำหรับข้อความแสดงเมื่อใช้อาร์เรย์ออบเจ็กต์String'text'
value-fieldชื่อฟิลด์ที่จะใช้สำหรับค่าเมื่อใช้อาร์เรย์ออบเจ็กต์String'value'
placeholderข้อความตัวยึดตำแหน่งสำหรับช่องป้อนString-
labelป้ายกำกับสำหรับช่องป้อนเลือกString''
supporting-labelข้อความข้างป้ายกำกับที่มีสไตล์สนับสนุนstring''
input-loaderแสดงสปินเนอร์การโหลดภายในช่องป้อนเลือก มีประโยชน์ขณะดึงตัวเลือกแบบอะซิงโครนัส (เช่น การค้นหา API / เลื่อนไม่สิ้นสุด) ค่าปัจจุบัน, ตัวยึดตำแหน่ง หรือสรุปชิปที่เลือกจะยังคงแสดงอยู่ข้างสปินเนอร์Booleanfalse
placementการจัดตำแหน่งป๊อปเปอร์ ดูตัวเลือกที่มีอยู่ในเอกสารString'bottom'
triggersอาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ดร็อปดาวน์ให้เปิด'click' | 'hover' | 'focus' | 'touch'[]['click']
popper-triggersอาร์เรย์ของอีเวนต์ที่จะทริกเกอร์เมนูดร็อปดาวน์ (องค์ประกอบป๊อปเปอร์) ให้เปิด'click' | 'hover' | 'focus' | 'touch'[][]
auto-hideเมื่อเป็นจริง จะซ่อนดร็อปดาวน์โดยอัตโนมัติเมื่อคลิกภายนอกArraytrue
popper-strategyกลยุทธ์การจัดตำแหน่งป๊อปเปอร์ 'absolute' หรือ 'fixed'String'absolute'
popper-widthความกว้างขององค์ประกอบป๊อปเปอร์String'100%'
popper-containerซีเลกเตอร์ CSS หรือ HTMLElement เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบป๊อปเปอร์String | HTMLElement''
widthความกว้างของตัวครอบการเลือกString'100%'
wrapper-positionCSS position ของตัวครอบ ใช้ 'initial' สำหรับการใช้งานโมดอลString'relative'
display-textข้อความแสดงสำหรับช่องป้อน (มีประโยชน์สำหรับ async/infinite scroll)String-
supporting-display-textแสดงข้อความที่กำหนดเองภายในรายการString-
persistent-display-textหากเป็นจริง displayText จะแสดงในช่องป้อนเสมอ แม้แต่เมื่อการเลือกเปลี่ยนแปลงBooleanfalse
display-selected-count-only แสดงตัวนับรายการที่เลือกเท่านั้นเมื่อเลือกรายการ แทนที่จะแสดงข้อความในช่องป้อน Boleanfalse
display-list-item-selectedแสดงรายการที่เลือกภายในรายการBooleanfalse
allow-select-allเปิดใช้งานปุ่ม "เลือกทั้งหมด" / "ยกเลิกการเลือกทั้งหมด" ในโหมดเลือกหลายรายการBooleanfalse
display-helperแสดงข้อความช่วยเหลือใต้ช่องป้อนBooleanfalse
helper-iconไอคอนที่จะแสดงพร้อมข้อความช่วยเหลือStringnull
helper-textข้อความช่วยเหลือที่จะแสดงใต้ช่องป้อนString''
disabledปิดใช้งานช่องป้อนและป๊อปเปอร์Booleanfalse
clearableแสดงปุ่มล้างเพื่อลบการเลือกทั้งหมดBooleanfalse
chippedทำให้ช่องป้อนฟิลด์รายการที่เลือกเป็นชิปBooleanfalse
searchableเปิดใช้งานการค้นหาภายในตัวเลือกการเลือกBooleanfalse
disabled-local-searchปิดใช้งานฟังก์ชันการค้นหาในเครื่องBooleanfalse
options-loaderแสดงการโหลดแบบโครงกระดูกภายในป๊อปเปอร์ มีประโยชน์ขณะดึงตัวเลือกแบบอะซิงโครนัส (เช่น การค้นหา API)Booleanfalse
infinite-scroll-loaderแสดงสปินเนอร์การโหลดที่ด้านล่างของรายการเมื่อทริกเกอร์เลื่อนไม่สิ้นสุด มีประโยชน์เมื่อโหลดรายการเพิ่มเติมเมื่อผู้ใช้เลื่อนถึงส่วนท้ายของรายการBooleanfalse
lozengeเปิดใช้งานโหมดลอซเซนจ์สำหรับรายการ รายการจะแสดงเป็นลอซเซนจ์เมื่อเปิดใช้งานBooleanfalse
item-iconไอคอนใดๆ จาก iconify (เช่น ph:trash)String''

อีเวนต์ ​

อีเวนต์เพย์โหลดคำอธิบาย
@update:modelValueArrayปล่อยออกมาทุกครั้งที่การเลือกเปลี่ยนแปลง
@popper-stateBooleanอีเวนต์ที่ปล่อยออกมาทุกครั้งที่คุณเปิดหรือปิดป๊อปเปอร์
@search-stringNoneอีเวนต์ที่ปล่อยออกมาทุกครั้งที่คุณพิมพ์ในช่องป้อนการค้นหา
@get-selected-optionsObjectปล่อยออกมาทุกครั้งที่เลือกรายการ ออบเจ็กต์เพย์โหลดคือออบเจ็กต์ตัวเลือกที่เลือก
@get-single-selected-itemObjectปล่อยออกมาทุกครั้งที่เลือกตัวเลือกเดียวในโหมดเลือกเดียว ออบเจ็กต์เพย์โหลดคือออบเจ็กต์รายการที่เลือก

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

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

หมายเหตุ ​

  • ใช้อาร์เรย์สำหรับ v-model ในโหมดการเลือกหลายรายการเสมอ
  • รองรับสตริง, ตัวเลข, และค่าออบเจ็กต์ คอมโพเนนต์จะปรับมาตรฐานค่าคุณค่าเดียวเป็นอาร์เรย์ภายใน
  • สำหรับค่าออบเจ็กต์ ให้ใช้ text-field และ value-field เพื่อระบุฟิลด์ที่จะใช้
  • ใช้ clearable เพื่ออนุญาตให้ผู้ใช้ล้างการเลือกทั้งหมด
  • ใช้ helper-text และ helper-icon เพื่อแสดงข้อมูลเพิ่มเติมใต้ช่องป้อน
  • ใช้ placement และ popper-strategy เพื่อควบคุมตำแหน่งและพฤติกรรมของการเลือก

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

Sprout HR
Sprout Sidekick

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