本文例項為大家分享了+Element UI實現下拉選單封裝的具體程式碼，供大家參考，具體內容如下

1、效果圖

先貼個效果圖，選單項沒有做樣式美化，圖中顯示的邊框也是沒有的（邊框是外部容器的邊框），其它的根據需要自己修改一下樣式即可。

2、元件封裝

元件的封裝用到了動畫、定位、，以及Element UI提供的下拉選單元件el-dropdown。程式碼如下，

<template>
  <div class="all" @click="clickFire">
    <span class="item-border">
      <el-image
        class="item"
        style="width: 24px; height: 24px"
        fit="cover"
        :lazy="isLazy"
        :src="itemProperty.url"
        :title="itemProperty.name"
        :placeholder="itemProperty.name"
      ></el-image>
    </span>
    <div class="wrap-item"></div>
    <!-- 下拉選單 -->
    <el-dropdown class="dropMenu" @command="handleCommand">
      <span class="el-dropdown-link" v-text="itemProperty.name"></span>
      <el-dropdown-menu slot="dropdown" class="dropMenuitems">
        <!-- <el-dropdown-item>黃金
 
糕</el-dropdown-item>
        <el-dropdown-item>獅子頭</el-dropdown-item>
        <el-dropdown-item>螺螄粉</el-dropdown-item> -->
        <el-dropdown-item
          class="dropMenu-item"
          v-for="(item,index) in itemProperty.menus"
          :key="index"
          :command="item"
          >{{ item }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  props: {
    itemProperty: Object,require: true,},data() {
    return {
      isLazy:http://www.cppcns.com
 
 true,item: {
        name: 'item',url: require('../../../static/imgs/menus/warning.png'),menus: [
          'submenu-1','submenu-2','submenu-3','submenu-4','submenu-5',],pDpWRUFDi},}
  },mounted() {
    this.$data.item = this.$props.itemProperty
    // console.log(this.$props.itemProperty)
  },methods: {
    //父級圖示點選事件
    clickFire() {
      //引數1：自定義元件事件，在父元件中被呼叫才能觸發父子元件的值傳遞；引數2：向父元件傳遞的資料[可為陣列形式]
      this.$emit('clickItem',this.$data.item)
    },//下拉選單點選事件
    handleCommand(command) {
      // console.log(command)
      this.$emit('handleCommand',command)
    },}
</script>
<style lang="less" scoped>
.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 skybl
 
ue;
  // 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;
  }
}
</style>

3、父元件中使用舉例

<template>
    <!-- 功能模組：使用子元件-注意自定義事件clickItem與handleCommand -->
    <div class="funcModules">
      <RingItem
        class="ringitem-style"
        v-for="(item,index) in funcItems"
        :key="index"
        :itemProperty="item"
        @clickItem="clickRingItem"
        @handleCommand="handleCommawww.cppcns.comndDropMenu"
      />
    </div>
</template>
<script>
//1-匯入子元件
import RingItem from '../Controls/RingItem'
export default {
  components: {
  //2-註冊元件
    RingItem,data() {
    return {
      //功能模組圖示資源
      funcItems: [
        {
          name: '系統管理',url: require('../../../static/imgs/menus/management.png'),menus: ['細則管理','關於我們'],methods: {
    /**
     * RingItem子元件點選事件：value是子元件中通過emit傳遞的值
     */
    clickRingItem(value) {
      //判斷子元件的name屬性值，實現相應的業務邏輯
      switch (value.name) {
        case '系統管理': {
          console.log('系統管理')
          //執行頁面跳轉-管理中心（看自己的需求，新增業務邏輯）
          //this.$router.push({ path: '/admincenter' })
          break
        }
      }
    },/**
     * RingItem子元件：下拉選單點選事件（value是子元件中通過emit傳遞的值）
     */
    handleCommandDropMenu(value) {
      console.log(value)
       switch (value.name) {
        case '細則管理': {
          console.log('系統管理')
          //執行頁面跳轉-管理中心（看自己的需求，新增業務邏輯）
          //this.$router.push({ path: '/admincenter' })
          break
        }
         case '關於我們': {
          console.log('系統管理')
          //執行頁面跳轉-管理中心（看自己的需求，新增業務邏輯）
          //this.$router.push({ path: '/admincenter' })
          break
        }
      }
    },}
</script>
<style lang="less" scoped>
//樣式調整
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。