สวิตช์

คอมโพเนนต์สวิตช์เพื่อแสดงสถานะบูลีน (คล้ายกับช่องทำเครื่องหมาย)

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

Switch

switchValue1 : false

<template>
  <div>
    <spr-switch v-model="switchValue1">Switch</spr-switch>
    <p>switchValue1: {{ switchValue1 }}</p>
  </div>
</template>

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

import SprSwitch from '@/components/switch/switch.vue';

const switchValue1 = ref(false);
</script>

ป้ายข้อความ

Left

Right

Left

Right

<!-- Default text position -->
<spr-switch v-model="switchValue2">Left</spr-switch>

<!-- Text position using the rightText slot -->
<spr-switch v-model="switchValue3">
  <template #rightText>Right</template>
</spr-switch>

<!-- Text position using both the leftText and rightText slots -->
<spr-switch v-model="switchValue4">
  <template #leftText>Left</template>
  <template #rightText>Right</template>
</spr-switch>

ปิดใช้งาน

Disabled false switch

Disabled true switch

<!-- Declare the disabled property -->
<spr-switch v-model="switchValue5" disabled>
  Disabled false switch
</spr-switch>

<!-- or set a value to the disabled property -->
<spr-switch v-model="switchValue6" :disabled="true">
  Disabled true switch
</spr-switch>

การปล่อยออกมา

คอมโพเนนต์สวิตช์ใช้ useVModel ของ @vueuse/core สำหรับคุณสมบัติและการผูก v-model โดยค่าเริ่มต้น emit update:modelValue จะถูกกำหนดและสามารถใช้เพื่อฟังการเปลี่ยนแปลงค่าใดๆ กับคุณสมบัติ modelValue

Switch

No event yet.

<template>
  <div>
    <spr-switch v-model="switchValue7" @update:modelValue="switch7UpdateHandler">Switch</spr-switch>
    <p>{{ switch7Label }}</p>
  </div>
</template>

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

import SprSwitch from '@/components/switch/switch.vue';

const switchValue7 = ref(true);
const switch7Label = ref('No event yet.');
const switch7UpdateHandler = (value) => {
  switch7Label.value = 'Value changed to ' + value;
};
</script>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
modelValue	ค่าปัจจุบันของสวิตช์ (สถานะเปิด/ปิด) คุณสมบัตินี้จำเป็นสำหรับการผูก v-model ให้ทำงานอย่างถูกต้อง ตั้งค่าเป็น true สำหรับสถานะเปิด และ false สำหรับสถานะปิด	boolean	false
disabled	เมื่อตั้งค่าเป็น true สวิตช์จะไม่สามารถโต้ตอบได้และปรากฏเป็นสีจางเพื่อแสดงว่าปิดใช้งาน สวิตช์จะไม่ปล่อยออกมาเหตุการณ์เมื่อถูกปิดใช้งาน	boolean	false
state	ควบคุมสถานะภาพของสวิตช์ สิ่งนี้ใช้ภายในเป็นหลักแต่สามารถตั้งค่าได้อย่างชัดเจน: default: สถานะปกติ hover: สถานะเมื่อเลื่อนเมาส์ (ยังตั้งค่า autofocus) pressed: เมื่อสวิตช์กำลังถูกคลิก/กด disabled: เมื่อสวิตช์ถูกปิดใช้งาน	'default' | 'hover' | 'pressed' | 'disabled'	'default'
id	แอตทริบิวต์ HTML id สำหรับองค์ประกอบอินพุตของสวิตช์ ใช้สำหรับเชื่อมโยงสวิตช์กับป้ายกำกับเพื่อการเข้าถึง เมื่อไม่ระบุ จะสร้าง ID แบบสุ่มด้วยรูปแบบ switch_input_[random] หรือ [provided_id]_[random] หากระบุ id	string	''

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
update:modelValue	ถูกปล่อยออกมาเมื่อสถานะสวิตช์เปลี่ยนแปลง เหตุการณ์นี้ใช้สำหรับการผูก v-model และจะไม่ถูกปล่อยออกมาเมื่อสวิตช์ถูกปิดใช้งาน คอมโพเนนต์ใช้ useVModel ของ @vueuse/core สำหรับการผูกสองทาง	(value: boolean) - ค่าใหม่ของสวิตช์หลังการเปลี่ยนสถานะ

Slots

ชื่อ	คำอธิบาย
default	ช่องเริ่มต้นที่แสดงข้อความทางด้านซ้ายของสวิตช์ ใช้สิ่งนี้สำหรับการจัดเตรียมป้ายกำกับเมื่อคุณต้องการให้มันอยู่ทางด้านซ้าย หากทั้งช่อง default และ leftText ถูกจัดเตรียม leftText จะมีความสำคัญ
leftText	วางข้อความทางด้านซ้ายของสวิตช์อย่างชัดเจน ช่องนี้มีความสำคัญเหนือช่องเริ่มต้นหากทั้งสองถูกจัดเตรียม หากช่องนี้และช่องเริ่มต้นว่างเปล่า จะไม่แสดงป้ายกำกับด้านซ้าย
rightText	แสดงข้อความทางด้านขวาของสวิตช์ ใช้ช่องนี้เมื่อคุณต้องการให้ป้ายกำกับปรากฏหลังสวิตช์ หากช่องนี้ว่างเปล่า จะไม่แสดงป้ายกำกับด้านขวา

Product Uses