การวางปุ่มการทำงานที่ด้านล่างของเลเยอร์กระสุน select เป็นวิธีการออกแบบที่พบบ่อยมาก
แต่น่าเสียดายที่ element-ui ไม่ได้ให้ช่องนี้แก่เรา หากเราต้องการใช้ฟังก์ชั่นนี้สามารถเขียนส่วนประกอบใหม่หรือรอการอัปเดตอย่างเป็นทางการได้หรือไม่ คำตอบคือแน่นอนไม่!
ฉันใช้เวลาเล็กน้อยในการใช้ฟังก์ชั่นนี้ผ่านฟังก์ชั่นสนับสนุน el-select และ el-cascader คลิกตัวอย่างของเอฟเฟกต์
ในความเป็นจริงตรรกะนั้นง่ายมาก เพียงแค่แทรก html ต่อไปนี้ลงในตำแหน่งที่ระบุ
<ul class = el-cascader-menu__list list = border-top: Solid 1px #e4e7ed; padding: 0> <li class = el-cascader-node = ความสูง: 38px; line-height: 38px> <i class = el-icon-plus> </i> < class = el-icon-arrow-right el-cascader-node__postfix/> </li> </ul>
ฉันใช้สไตล์ el-cascader โดยตรงที่นี่ ในการใช้งานจริง html นี้สามารถแก้ไขได้ตามความต้องการของฉันเอง
บนรหัสเขียนฟังก์ชั่นนี้ใน methods
/*** เพิ่มปุ่มการทำงานด้านล่างของเลเยอร์กระสุนสำหรับตัวเลือกและ cascader ของ Element-ui* @param ที่มองเห็นได้* @param Refname Set Refname* @param onclick ปุ่มการทำงานด้านล่างคลิกเพื่อฟัง*/visiblechange ให้ popper = ref. $ refs.popper; if (popper. $ el) popper = popper. $ el; if (! array.from (popper.children). บาง some (v => v.classname === 'el-cascader-menu__list')) {const el = document.createElement ('ul'); El.ClassName = 'El-Cascader-Menu__list'; El.Style = 'Border-Top: Solid 1px #e4e7ed; Padding: 0; สี: #606266; '; el.innerhtml = `<li class = el-cascader-node = ความสูง: 38px; ความสูงบรรทัด: 38px> <i class = el-icon-menu> </i> <span class = el-cascader-node__label> การจัดการการจำแนกประเภทผลิตภัณฑ์ </span> Popper.AppendChild (EL); el.onclick = () => {// ตรรกะที่คุณต้องการทริกเกอร์หลังจากคลิกเหตุการณ์คลิกที่ปุ่มด้านล่างสามารถเขียนได้โดยตรง onclick && onclick (); // รหัสต่อไปนี้ใช้เลเยอร์กระสุนที่ซ่อนอยู่หลังจากคลิกและไม่จำเป็นต้องลบหาก (ref.toggledropdownvisible) {ref.toggledropdownvisible (เท็จ); } else {ref.visible = false; - - วิธีการโทรของ el-select นั้นเหมือนกับ el-cascader ที่นี่ el-cascader ใช้เป็นตัวอย่าง
<el-cascader: ตัวเลือก = cascaderoptions v-model = cascadervalue @visible-change = v => visiblechange (v, 'cascader', cascaderclick) ref = cascader/>เคล็ดลับ: เวอร์ชันอย่างเป็นทางการอาจล้มเหลวในภายหลังเนื่องจากการอัปเกรดได้รับการอัปเดตดังนั้นโปรดใช้ด้วยความระมัดระวัง สรุป
ด้านบนคือสิ่งที่ตัวแก้ไขแนะนำให้คุณเพิ่มปุ่มการทำงานด้านล่างที่ด้านล่างขององค์ประกอบ -UI Select และ Cascade ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!