Mettre le bouton de fonctionnement au bas de la couche de balle select est une méthode de conception très courante.
Mais malheureusement, element-ui ne nous a pas fourni cette fente. Si nous voulons implémenter cette fonction, ne peut réécrire les composants que ou attendre les mises à jour officielles? La réponse est bien sûr non!
J'ai passé un peu de temps à mettre en œuvre cette fonction à travers une fonction, en soutenant el-select et el-cascader , cliquez sur Aperçu de l'effet
En fait, la logique est très simple. Insérez simplement le html suivant dans l'emplacement spécifié.
<ul class = el-cascader-menu__list style = border-top: solide 1px # e4e7ed; padding: 0> <li class = el-cascader-node style = height: 38px; line-height: 38px> <i class = el-icon-pllus> </i> <span class = elccader-node__Label> new Product Classification </ Span> classe = el-icon-arrow-droite el-cascader-node__postfix /> </li> </ul>
J'utilise directement le style el-cascader ici. En usage réel, ce html peut être modifié en fonction de mes propres besoins
Sur le code, écrivez cette fonction dans methods
/ ** * Ajoutez le bouton de fonctionnement inférieur de la couche de balle pour le SELECT et CASCADER de Element-Ui * @param Visible * @param RefName Set RefName * @param onclick Le bouton de fonctionnement inférieur cliquez pour écouter * / visiblechange (visible, refs, onclick) {if (visible) {const Ref = this. $ Refs [RefName]; Laissez Popper = réf. $ 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: solide 1px # e4e7ed; rembourrage: 0; Couleur: # 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> Gestion de la classification des produits <pan> <i class = el-icon-arrow-right-nated-node__Postfix / </ li>; Popper.ApendChild (EL); el.onclick = () => {// La logique que vous souhaitez déclencher après avoir cliqué sur l'événement de clic du bouton inférieur peut également être écrit directement onClick && onClick (); // Le code suivant implémente la couche de balle masquée après avoir cliqué et n'a pas besoin d'être supprimé if (Ref.ToggledRopDownVisible) {Ref.ToggledRopDownVisible (false); } else {Ref.Visible = false; }}}; }}}, La méthode d'appel d' el-select est la même que el-cascader . Ici, el-cascader est utilisé comme exemple.
<El-Cascader: Options = CascadeRoPtions V-model = CascaDervalue @ Visible-Change = V => VisibleChange (V, 'Cascader', CascaderClick) Ref = Cascader />Conseil: la version officielle peut échouer plus tard à mesure que la mise à niveau est mise à jour, alors veuillez l'utiliser avec prudence Résumer
Ce qui précède est ce que l'éditeur vous a présenté pour ajouter les boutons de fonctionnement inférieurs en bas de l'élément-UI Select et Cascade. J'espère que ce sera utile à tous!