เลือก

การตั้งค่าเริ่มต้น

Mode - เลือก หลาย รายการเพื่อให้สามารถเลือกได้หลายตัวเลือกจากเมนูแบบเลื่อนลง มิฉะนั้น ควรใช้โหมดเดี่ยว

การตั้งค่ารูปลักษณ์และความรู้สึก

Label (ไม่บังคับ) เพื่อใช้แสดงป้ายกำกับส่วนประกอบ

ตัว Placeholder (ไม่บังคับ) ที่จะใช้เพื่อแสดงตัวยึดของส่วนประกอบ

Name (บังคับ) - ชื่อของส่วนประกอบ

Size (บังคับ) - ขนาดของส่วนประกอบ ถูกตั้งค่าเป็นค่าเริ่มต้นเมื่อสร้างส่วนประกอบ

Search (บังคับ) - เพื่อให้สามารถค้นหาภายในตัวเลือกแบบเลื่อนลงที่มีอยู่ ถูกปิดโดยปริยาย

Clear icon (จำเป็น) - แสดงไอคอนตัวเลือกที่ชัดเจนหากเปิดใช้งาน ถูกปิดโดยปริยาย

Disabled ใช้งาน (บังคับ) - ทำให้คอมโพเนนต์ถูกปิดใช้งานหากเปิดอยู่ ถูกปิดโดยปริยาย

Visible ได้ (จำเป็น) - ทำให้ส่วนประกอบมองเห็นได้หากเปิดใช้งาน เปิดใช้งานโดยค่าเริ่มต้น

ตัวเลือก

เลือกตัวเลือก สามารถกำหนดไว้ล่วงหน้าในการตั้งค่าส่วนประกอบ

ทริกเกอร์เวิร์กโฟลว์

• onChange - เริ่มทำงานเมื่อตัวเลือกแบบเลื่อนลงมีการเปลี่ยนแปลง
• onFocus - เริ่มทำงานเมื่อคอมโพเนนต์ Select ถูกโฟกัส
• onBlur - เริ่มทำงานเมื่อองค์ประกอบที่เลือกเบลอ
• onCreate - เริ่มทำงานเมื่อส่วนประกอบถูกสร้างขึ้น
• onDestroy - เริ่มทำงานเมื่อส่วนประกอบปรากฏขึ้น

การกระทำของคอมโพเนนต์

Select Get Properties

รับคุณสมบัติของส่วนประกอบ

พารามิเตอร์ อินพุต :

• Component Id [string] - เลือกตัวระบุส่วนประกอบ

พารามิเตอร์ ขา ออก:

• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean ] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Options [Select Option array] - อาร์เรย์ของตัวเลือกที่เลือกไว้ล่วงหน้า
• Selected [Select Option array] - อาร์เรย์ของตัวเลือกที่เลือกหรือเพียงแค่อาร์เรย์ที่มีองค์ประกอบเดียวในกรณีของ Single Mode
• Validate Icon [boolean] - ไอคอนที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบค่า;

Select Set Properties

ตั้งค่าคุณสมบัติของส่วนประกอบ

พารามิเตอร์ อินพุต :

• Component Id [string] - เลือกตัวระบุส่วนประกอบ
• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms ) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Options [Select Option array] - อาร์เรย์ของตัวเลือกที่เลือกไว้ล่วงหน้า
• Validate Icon [boolean] - ไอคอนที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบค่า;

เลือก ปรับปรุงคุณสมบัติ

อัพเดตคุณสมบัติของคอมโพเนนต์

พารามิเตอร์ อินพุต :

• Component Id [string] - เลือกตัวระบุส่วนประกอบ
• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms ) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Options [Select Option array] - อาร์เรย์ของตัวเลือกที่เลือกไว้ล่วงหน้า
• Validate Icon [boolean] - ไอคอนที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบค่า;

Make Select Option

เขียน Select Option model ด้วยฟิลด์ที่กำหนด

พารามิเตอร์ อินพุต :

• ID [integer] - เลือก ID ตัวเลือก;
• Label [string] - เลือกป้ายกำกับของตัวเลือก;
• Value [integer] - เลือกมูลค่าการสั่งซื้อของตัวเลือกในรายการแบบเลื่อนลง
• Icon [string] - ไอคอนที่จะใช้ในรายการเลือกตัวเลือก;
• Disabled [boolean] - ปิดใช้งาน Select Option หากเป็นจริง

พารามิเตอร์ ขา ออก:

• Select Option [Select Option] - เลือกรุ่นตัวเลือก;

Expand Select Option

ขยายรูปแบบ Select Option

พารามิเตอร์ อินพุต :

• Select Option [Select Option] - เลือกรุ่นตัวเลือก;

พารามิเตอร์ ขา ออก:

• ID [integer] - เลือก ID ตัวเลือก;
• Label [string] - เลือกป้ายกำกับของตัวเลือก;
• Value [integer] - เลือกมูลค่าการสั่งซื้อของตัวเลือกในรายการแบบเลื่อนลง
• Icon [string] - ไอคอนที่จะใช้ในรายการ Select Option;
• Disabled [boolean] - ปิดใช้งาน Select Option หากเป็นจริง

ตัวอย่างการใช้งาน

เป็นไปได้ที่จะสร้างและเพิ่มรายการ Select Option ใหม่ลงในรายการดรอปดาวน์ผ่านกระบวนการทางธุรกิจส่วนหน้า

ตรรกะควรเป็นดังนี้:

• สร้างรายการ Select Option ใหม่พร้อมฟิลด์ที่ระบุ ( Make Select Option )

• รับอาร์เรย์รายการ Select Option ที่มีอยู่ ( Select Get Properties ) และรวมเข้ากับรายการ Select Option ที่สร้างขึ้นก่อนหน้านี้ ( Append Array )

• อัปเดตอาร์เรย์รายการ Select Option ( Select Update Properties ) สำหรับคอมโพเนนต์ Select ที่ระบุ