Element-Ui定制Dropdown组件

2023-12-16 21:44

本文主要是介绍Element-Ui定制Dropdown组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.效果

说明:移入后新增图标,然后移入后图标变色。当然大家可以想到用@mouseover移入事件来实现移入颜色的变化,但是在使用Dropdown组件的时候,不支持这种写法。因此采用了原生的遍历对象的形式,为每一个item对象绑定鼠标移入和移除事件。

2.实现步骤

2.1静态组件

<template><div class="outer-dropdown-link"><el-dropdown><span class="el-dropdown-link">下拉菜单</span><el-dropdown-menu slot="dropdown">
<!--        遍历数组--><el-dropdown-item v-for="(item,index) in dropdownArr" ref="dropItem"><span ref="svgOne" style="vertical-align: middle">
<!--             如果为索引为0,那么就显示第一个-->
<!--             viewBox 是 SVG 元素上的一个属性,它定义了用户坐标系统和用户坐标之间的映射关系,同时也规定了 SVG 图形在坐标系统中的位置和大小。viewBox 通常包含四个值,分别是 min-x, min-y, width, 和 height。--><svg v-show="index==0" xmlns="http://www.w3.org/2000/svg" width="25" height="31" viewBox="0 -6 43 44"fill="none">
<!--             isHoverOne默认为false,移入填充fill数组中的第一个颜色 --><pathd="M22.575 17.5038C24.2928 16.3804 26.2575 15.724 28.2864 15.5958C30.3153 15.4676 32.3427 15.8717 34.1801 16.7705C34.5151 14.9998 34.4668 13.1743 34.0387 11.4251C33.6106 9.67598 32.8132 8.04647 31.7038 6.65356C30.5945 5.26065 29.2006 4.13888 27.6223 3.36875C26.044 2.59862 24.3203 2.19922 22.575 2.19922C20.8297 2.19922 19.106 2.59862 17.5277 3.36875C15.9494 4.13888 14.5555 5.26065 13.4462 6.65356C12.3368 8.04647 11.5394 9.67598 11.1113 11.4251C10.6832 13.1743 10.6349 14.9998 10.9699 16.7705C12.8073 15.8717 14.8347 15.4676 16.8636 15.5958C18.8925 15.724 20.8572 16.3804 22.575 17.5038ZM13.5732 18.0905C14.4254 20.294 16.0066 22.1131 18.0351 23.2239C18.6554 21.6231 19.5929 20.1742 20.7874 18.9705C18.5765 17.7459 15.9992 17.4315 13.5732 18.0905ZM25.8026 27.7412C25.8021 27.2254 25.7618 26.7104 25.682 26.2012C23.6467 26.7658 21.5033 26.7658 19.468 26.2012C19.3882 26.7104 19.3479 27.2254 19.3474 27.7412C19.342 29.15 19.627 30.5439 20.1835 31.8299C20.7401 33.1159 21.5553 34.2645 22.575 35.1992C23.5947 34.2645 24.4099 33.1159 24.9665 31.8299C25.523 30.5439 25.808 29.15 25.8026 27.7412ZM31.5768 18.0905C29.1502 17.4293 26.5713 17.7465 24.3626 18.9778C25.5592 20.1797 26.497 21.6291 27.1149 23.2312C29.1446 22.1186 30.726 20.2967 31.5768 18.0905ZM25.1216 24.0525C24.5621 22.6138 23.6909 21.3268 22.575 20.2905C21.4591 21.3268 20.5879 22.6138 20.0284 24.0525C21.6967 24.5147 23.4533 24.5147 25.1216 24.0525Z":fill="isHoverOne?fill[1]:fill[0]"/><pathd="M34.1514 16.5C33.8001 18.3441 33.0367 20.0789 31.9217 21.5671C30.8068 23.0554 29.3707 24.2564 27.727 25.0751C28.1517 27.3221 27.9556 29.6466 27.1611 31.7846C26.3665 33.9227 25.0053 35.7886 23.2321 37.1705L22.6243 37.6433C24.5169 38.9128 26.7259 39.5923 28.9851 39.5998C31.6678 39.6159 34.2758 38.6905 36.3787 36.9761C38.4816 35.2617 39.9538 32.8609 40.5524 30.1696C41.151 27.4783 40.8403 24.6574 39.6715 22.1724C38.5027 19.6873 36.5456 17.6865 34.1232 16.5H34.1514ZM17.2317 27.3953C17.2325 26.6165 17.3059 25.8395 17.4508 25.0751C15.8072 24.2564 14.3711 23.0554 13.2561 21.5671C12.1411 20.0789 11.3778 18.3441 11.0265 16.5C8.60401 17.6865 6.64695 19.6873 5.47813 22.1724C4.30932 24.6574 3.99859 27.4783 4.59721 30.1696C5.19583 32.8609 6.66804 35.2617 8.77094 36.9761C10.8738 38.6905 13.4818 39.6159 16.1645 39.5998C18.4237 39.5923 20.6327 38.9128 22.5253 37.6433L21.9175 37.1705C20.4513 36.0287 19.2643 34.5504 18.4508 32.8534C17.6374 31.1564 17.2199 29.2875 17.2317 27.3953Z":fill="isHoverOne?fill[1]:fill[0]"/></svg></span>
<!--          如果索引为1,那么就显示第二个--><span ref="svgTwo" style="vertical-align: middle"><svg v-show="index==1" xmlns="http://www.w3.org/2000/svg" width="25" height="31" viewBox="0 -6 50 50"fill="none"><pathd="M42.1055 2.97411C36.5347 0.953216 30.6245 0.00968955 24.6951 0.194637C18.7657 0.00968955 12.8555 0.953216 7.2847 2.97411C2.42823 5.13994 0 7.60657 0 10.374V39.0351C0 41.8146 2.4768 44.594 7.2847 46.2545C12.7734 48.6064 18.7184 49.728 24.6951 49.5393C30.6245 49.7243 36.5347 48.7808 42.1055 46.7599C46.7677 44.9189 49.3902 42.1394 49.3902 39.36V10.4823C49.3902 7.71486 46.962 5.24823 42.1055 3.0824V2.97411ZM39.2645 15.6081C34.5667 17.1418 29.6403 17.8741 24.6951 17.7739C19.7485 17.8979 14.818 17.165 10.1257 15.6081C5.39068 14.3808 3.24169 12.5398 3.24169 10.374C3.24169 8.20819 5.71849 6.76431 10.0893 5.13994C14.8337 3.84785 19.7389 3.22805 24.6587 3.29899C29.6084 3.37089 34.524 4.1241 39.2645 5.53701C43.6353 7.08918 46.1121 8.93013 46.1121 10.7711C46.1121 12.612 43.9267 14.3808 39.2645 15.7164V15.6081ZM39.5923 24.5602C34.7416 25.9726 29.7144 26.7016 24.6587 26.726C19.6048 26.6781 14.5809 25.9495 9.72507 24.5602C5.39068 23.008 2.84103 21.167 2.84103 19.3261V15.933C5.60722 17.3796 8.52682 18.5176 11.5462 19.3261C15.8548 20.3406 20.2667 20.8614 24.6951 20.8783C29.0992 20.8559 33.4863 20.3352 37.7711 19.3261C40.8156 18.5226 43.7599 17.3845 46.5492 15.933V19.5427C46.5492 21.0949 44.0724 22.9358 39.7016 24.488L39.5923 24.5602ZM39.5923 34.4147C34.7416 35.8271 29.7144 36.5561 24.6587 36.5805C19.617 36.5293 14.6056 35.8007 9.76149 34.4147C5.39068 33.1874 2.84103 31.3464 2.84103 29.1806V24.5602C5.60131 26.0743 8.5204 27.2847 11.5462 28.1699C15.8519 29.2087 20.2638 29.7538 24.6951 29.7942C29.0992 29.7719 33.4863 29.2511 37.7711 28.2421C40.797 27.3569 43.7161 26.1465 46.4764 24.6324V29.1806C46.4764 31.3464 43.9996 33.1874 39.6287 34.4147H39.5923ZM24.6951 46.4711C19.6412 46.4232 14.6173 45.6946 9.76149 44.3053C5.39068 43.078 2.84103 41.2009 2.84103 39.36V34.7395C5.60118 36.254 8.5203 37.4644 11.5462 38.3493C15.72 39.3576 19.9985 39.8786 24.2945 39.9014C28.6985 39.8791 33.0857 39.3583 37.3705 38.3493C40.5211 37.5226 43.5555 36.31 46.4035 34.7395V39.36C46.4035 41.2009 43.9267 42.9697 39.5559 44.594C34.6841 45.8701 29.661 46.4893 24.6223 46.435L24.6951 46.4711Z":fill="isHoverTwo?fill[1]:fill[0]"/></svg></span>
<!--          如果索引为2,那么就显示第三个--><span style="margin-right: 12px;vertical-align: middle" ref="svgThree"><svg v-show="index==2" xmlns="http://www.w3.org/2000/svg" width="25" height="31" viewBox="0 -6 50 50"fill="none"><pathd="M17.0966 0.109375H5.69887C4.18744 0.109375 2.73791 0.70979 1.66916 1.77854C0.600415 2.84728 0 4.29681 0 5.80825V17.206C0 18.7174 0.600415 20.167 1.66916 21.2357C2.73791 22.3045 4.18744 22.9049 5.69887 22.9049H17.0966C18.6081 22.9049 20.0576 22.3045 21.1263 21.2357C22.1951 20.167 22.7955 18.7174 22.7955 17.206V5.80825C22.7955 4.29681 22.1951 2.84728 21.1263 1.77854C20.0576 0.70979 18.6081 0.109375 17.0966 0.109375ZM18.9962 17.206C18.9962 17.7098 18.7961 18.193 18.4399 18.5492C18.0836 18.9055 17.6004 19.1056 17.0966 19.1056H5.69887C5.19506 19.1056 4.71188 18.9055 4.35564 18.5492C3.99939 18.193 3.79925 17.7098 3.79925 17.206V5.80825C3.79925 5.30444 3.99939 4.82126 4.35564 4.46501C4.71188 4.10876 5.19506 3.90862 5.69887 3.90862H17.0966C17.6004 3.90862 18.0836 4.10876 18.4399 4.46501C18.7961 4.82126 18.9962 5.30444 18.9962 5.80825V17.206ZM17.0966 26.7041H5.69887C4.18744 26.7041 2.73791 27.3045 1.66916 28.3733C0.600415 29.442 0 30.8916 0 32.403V43.8007C0 45.3122 0.600415 46.7617 1.66916 47.8305C2.73791 48.8992 4.18744 49.4996 5.69887 49.4996H17.0966C18.6081 49.4996 20.0576 48.8992 21.1263 47.8305C22.1951 46.7617 22.7955 45.3122 22.7955 43.8007V32.403C22.7955 30.8916 22.1951 29.442 21.1263 28.3733C20.0576 27.3045 18.6081 26.7041 17.0966 26.7041ZM18.9962 43.8007C18.9962 44.3046 18.7961 44.7877 18.4399 45.144C18.0836 45.5002 17.6004 45.7004 17.0966 45.7004H5.69887C5.19506 45.7004 4.71188 45.5002 4.35564 45.144C3.99939 44.7877 3.79925 44.3046 3.79925 43.8007V32.403C3.79925 31.8992 3.99939 31.416 4.35564 31.0598C4.71188 30.7035 5.19506 30.5034 5.69887 30.5034H17.0966C17.6004 30.5034 18.0836 30.7035 18.4399 31.0598C18.7961 31.416 18.9962 31.8992 18.9962 32.403V43.8007ZM43.6914 26.7041H32.2936C30.7822 26.7041 29.3326 27.3045 28.2639 28.3733C27.1952 29.442 26.5947 30.8916 26.5947 32.403V43.8007C26.5947 45.3122 27.1952 46.7617 28.2639 47.8305C29.3326 48.8992 30.7822 49.4996 32.2936 49.4996H43.6914C45.2028 49.4996 46.6523 48.8992 47.7211 47.8305C48.7898 46.7617 49.3902 45.3122 49.3902 43.8007V32.403C49.3902 30.8916 48.7898 29.442 47.7211 28.3733C46.6523 27.3045 45.2028 26.7041 43.6914 26.7041ZM45.591 43.8007C45.591 44.3046 45.3909 44.7877 45.0346 45.144C44.6784 45.5002 44.1952 45.7004 43.6914 45.7004H32.2936C31.7898 45.7004 31.3066 45.5002 30.9504 45.144C30.5941 44.7877 30.394 44.3046 30.394 43.8007V32.403C30.394 31.8992 30.5941 31.416 30.9504 31.0598C31.3066 30.7035 31.7898 30.5034 32.2936 30.5034H43.6914C44.1952 30.5034 44.6784 30.7035 45.0346 31.0598C45.3909 31.416 45.591 31.8992 45.591 32.403V43.8007Z":fill="isHoverThree?fill[1]:fill[0]"/><pathd="M26.5952 11.5071C26.5952 14.53 27.796 17.4291 29.9335 19.5665C32.071 21.704 34.9701 22.9049 37.993 22.9049C41.0158 22.9049 43.9149 21.704 46.0524 19.5665C48.1899 17.4291 49.3907 14.53 49.3907 11.5071C49.3907 8.48425 48.1899 5.58519 46.0524 3.4477C43.9149 1.31021 41.0158 0.109375 37.993 0.109375C34.9701 0.109375 32.071 1.31021 29.9335 3.4477C27.796 5.58519 26.5952 8.48425 26.5952 11.5071Z":fill="isHoverThree?fill[1]:fill[0]"/></svg></span><span> {{ item }}</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template>

2.2js

说明:isHoverOne指第一个el-dropdown-item,然后依次类推

export default {name: "index",data() {return {dropdownArr: ["原生", "启动", "起飞"],fill: ["#D2D2D2", "#00A3FF"],isHoverOne: false,isHoverTwo: false,isHoverThree: false,}},mounted() {let self = this// 获取所有的 <el-dropdown-item> 元素// 遍历元素并为每个元素添加 mouseover 事件监听器// 移入事件const handleMouseOver = (self, index) => {switch (index) {case 0:self.isHoverOne = true;break;case 1:self.isHoverTwo = true;break;case 2:self.isHoverThree = true;break;}};// 移除事件const handleMouseOut = (self, index) => {switch (index) {case 0:self.isHoverOne = false;break;case 1:self.isHoverTwo = false;break;case 2:self.isHoverThree = false;break;}};const dropdownItems = self.$refs.dropItem;// 遍历每一个dropdownitem对象,为每一个item绑定鼠标移入和移除事件dropdownItems.forEach((item, index) => {item.$el.addEventListener("mouseover", () => handleMouseOver(self, index));item.$el.addEventListener("mouseout", () => handleMouseOut(self, index));});},methods: {}
}

问题:这种写法不行了!

item.addEventListener("mouseover", () => handleMouseOver(self, index));
item.addEventListener("mouseout", () => handleMouseOut(self, index));

正确写法: 

   item.$el.addEventListener("mouseover", () => handleMouseOver(self, index));
   item.$el.addEventListener("mouseout", () => handleMouseOut(self, index));

2.3css


.el-dropdown-link {cursor: pointer;color: #409EFF;
}/* 移入后展现的el-dropdown-menu样式修改*/
.el-dropdown-menu__item:not(.is-disabled):hover {background-color: transparent;
}/*下拉框的元素*/
#dropdown-menu-9186 {background-color: gray;
}/*下拉框里面的字体颜色*/
.el-dropdown-menu__item {color: red;
}

 

这篇关于Element-Ui定制Dropdown组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/501995

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理,在有一定基础认识的前提下,通过阅读kubelet源码,对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

PDFQFZ高效定制:印章位置、大小随心所欲

前言 在科技编织的快节奏时代,我们不仅追求速度,更追求质量,让每一分努力都转化为生活的甜蜜果实——正是在这样的背景下,一款名为PDFQFZ-PDF的实用软件应运而生,它以其独特的功能和高效的处理能力,在PDF文档处理领域脱颖而出。 它的开发,源自于对现代办公效率提升的迫切需求。在数字化办公日益普及的今天,PDF作为一种跨平台、不易被篡改的文档格式,被广泛应用于合同签署、报告提交、证书打印等各个

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面,引入了一个子组件,在父组件中调用子组件的方法时,报错提示: [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

JavaEE应用的组件

1、表现层组件:主要负责收集用户输入数据,或者向客户显示系统状态。最常用的表现层技术是JSP,但JSP并不是唯一的表现层技术。 2、控制器组件:对于JavaEE的MVC框架而言,框架提供一个前端核心控制器,而核心控制器负责拦截用户请求,并将用户请求转发给用户实现的控制器组件。而这些用户实现的控制器则负责处理调用业务逻辑方法,处理用户请求。 3、业务逻辑组件:是系统的核心组件,实现系统的业务逻辑