يعد وضع زر التشغيل في أسفل طبقة select Bullet طريقة تصميم شائعة جدًا.
لكن لسوء الحظ ، لم يقدم لنا element-ui هذه الفتحة. إذا أردنا تنفيذ هذه الوظيفة ، فهل يمكن إعادة كتابة المكونات أو انتظار التحديثات الرسمية؟ الجواب بالطبع لا!
قضيت بعض الوقت في تنفيذ هذه الوظيفة من خلال وظيفة ما ، ودعم el-select و el-cascader ، انقر فوق معاينة التأثير
في الواقع ، المنطق بسيط للغاية. فقط أدخل html التالي في الموقع المحدد.
أقل class = el-icon-arrow-right el-cascader-node__postfix/> </li> </ul>
أنا استخدم مباشرة نمط el-cascader هنا. في الاستخدام الفعلي ، يمكن تعديل هذا html وفقًا لاحتياجاتي الخاصة
على الكود ، اكتب هذه الوظيفة في methods
/*** أضف زر التشغيل السفلي للطبقة الرصاصة لـ Select and Cascader of element-ui* param visible* param refname set refname* param onclick زر التشغيل السفلي انقر للاستماع*/visiBleChange (مرئي ، مرجع ، دع popper = المرجع $ refs.popper ؛ إذا (popper. $ el) popper = popper. $ el ؛ if (! array.from (popper.children) .some (v => v.className === 'el-cascader-menu__')) {const el = document.CreateElement ('ul') ؛ el.ClassName = 'al-cascader-menu__list' ؛ el.style = 'الحدود: الصلبة 1px #e4e7ed ؛ الحشو: 0 ؛ اللون: #606266 ؛ '؛ el.innerhtml = `<li class = el-cascader-node style = height: 38px ؛ line-height: 38px> <i class = el-icon-menu> </i> <span class = el-cascader-node__label> management production </span> <i class = el-arrow-right-right-ar> popper.appendchild (EL) ؛ يمكن أيضًا كتابة el.onclick = () => {// المنطق الذي تريد تشغيله بعد النقر فوق حدث النقر فوق الزر السفلي مباشرة على onclick && onclick () ؛ . } آخر {Ref.Visible = false ؛ }}} ؛ }}} ، طريقة استدعاء el-select هي نفس el-cascader . هنا ، يتم استخدام el-cascader كمثال.
<El-Cascader: Options = cascaderoptions v-model = cascadervalue @visible-change = v => visiblechange (v ، 'cascader' ، cascaderclick) ref = cascader/>نصيحة: قد يفشل الإصدار الرسمي لاحقًا مع تحديث الترقية ، لذا يرجى استخدامه بحذر لخص
ما سبق هو ما قدمه لك المحرر لإضافة أزرار التشغيل السفلية في الجزء السفلي من Element-Ui Select and Cascade. آمل أن يكون ذلك مفيدًا للجميع!