Vue+Element|Vue+Element UI实现下拉菜单的封装 Vue+ElementUI实现下拉菜单的封装

本文实例为大家分享了Vue+Element UI实现下拉菜单封装的具体代码，供大家参考，具体内容如下
1、效果图 【Vue+Element|Vue+Element UI实现下拉菜单的封装】先贴个效果图，菜单项没有做样式美化，图中显示的边框也是没有的（边框是外部容器的边框），其它的根据需要自己修改一下样式即可。

文章图片

2、组件封装组件的封装用到了CSS动画、定位，以及Element UI提供的下拉菜单组件el-dropdown，代码如下

.all {// border: 1px solid skyblue; display: inline-block; position: relative; width: 65px; height: 65px; // overflow: hidden; }// 最内层.item-border {display: inline-block; margin: 0 auto; margin-left: 0px; margin-top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid skyblue; // background-color: slateblue; .item {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }}// 最外层.wrap-item {position: absolute; top: 0; left: 0; display: inline-block; width: 56px; height: 56px; border: 5px dotted transparent; border-left: 5px dotted #73ffff; border-left-width: 3px; border-right-color: #73ffff; border-top-color: transparent; border-radius: 50%; // background-color: burlywood; animation: circle 3s infinite linear; }@keyframes circle {0% {transform: rotate(0deg); }100% {transform: rotate(-360deg); }}//下拉菜单.dropMenu {margin-top: 5px; // background-color: yellowgreen; color: #fff; //标题项.el-dropdown-link {cursor: pointer; }//菜单子项.el-dropdown-menu__item {color: red !important; }.dropMenu-item {background-color: rosybrown; }}

3、父组件中使用举例