Vue+Element UIはドロップダウンメニューのカプセル化を実現します

<テンプレート>
  <div class="all" @click="clickFire">
    <span class="item-border">
      <el-image
        クラス="アイテム"
        スタイル="幅: 24px; 高さ: 24px"
        fit="カバー"
        :lazy="isLazy"
        :src="アイテムプロパティ.url"
        :title="アイテムプロパティ名"
        :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 スロット="ドロップダウン" クラス="dropMenuitems">
        <!-- <el-dropdown-item>ゴールデンケーキ</el-dropdown-item>
        <el-dropdown-item>ライオンの頭</el-dropdown-item>
        <el-dropdown-item>カタツムリライスヌードル</el-dropdown-item> -->
        <el-ドロップダウン項目
          class="ドロップメニュー項目"
          v-for="(item, index) in itemProperty.menus"
          :key="インデックス"
          :command="アイテム"
          >{{ 項目 }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  小道具: {
    項目プロパティ: オブジェクト、
    必要: true、
  },
  データ（） {
    戻る {
      isLazy: true、
      アイテム：
        名前: 'アイテム',
        url: require('../../../static/imgs/menus/warning.png'),
        メニュー: [
          'サブメニュー-1',
          'サブメニュー2',
          'サブメニュー3',
          'サブメニュー-4',
          'サブメニュー-5',
        ]、
      },
    }
  },
  マウント() {
    this.$data.item = this.$props.itemプロパティ
    // console.log(this.$props.itemProperty)
  },
  メソッド: {
    //親アイコンクリックイベント clickFire() {
      //パラメータ 1: 親コンポーネントで呼び出して親子コンポーネントの値転送をトリガーできるカスタム コンポーネント イベント。パラメータ 2: 親コンポーネントに渡されるデータ [配列形式にすることができます]
      this.$emit('clickItem', this.$data.item)
    },
    //ドロップダウンメニューのクリックイベント handleCommand(command) {
      // console.log(コマンド)
      this.$emit('handleCommand', コマンド)
    },
  },
}
</スクリプト>
<style lang="less" スコープ>
。全て {
  // 境界線: 1px ソリッドスカイブルー;
  表示: インラインブロック;
  位置: 相対的;
  幅: 65px;
  高さ: 65px;
  // オーバーフロー: 非表示;
}
// 最も内側のlayer.item-border {
  表示: インラインブロック;
  マージン: 0 自動;
  左マージン: 0px;
  上マージン: 10px;
  幅: 44px;
  高さ: 44px;
  境界線の半径: 50%;
  境界線: 3px 実線スカイブルー;
  // 背景色: スレートブルー;
  。アイテム {
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
  }
}

// 最も外側のレイヤー.wrap-item {
  位置: 絶対;
  上: 0;
  左: 0;
  表示: インラインブロック;
  幅: 56px;
  高さ: 56px;
  境界線: 5px の透明な点線;
  左境界線: 5px 点線 #73ffff;
  左境界線の幅: 3px;
  右境界線の色: #73ffff;
  境界線上部の色: 透明;
  境界線の半径: 50%;
  // 背景色: バーリーウッド;
  アニメーション: 3 秒間の無限直線の円。
}
@keyframes 円 {
  0% {
    変換: 回転(0度);
  }

  100% {
    変換: 回転(-360度);
  }
}
//ドロップダウンメニュー.dropMenu {
  上マージン: 5px;
  // 背景色: 黄緑;
  色: #fff;
  //タイトル item.el-dropdown-link {
    カーソル: ポインタ;
  }
  //メニューサブ項目.el-dropdown-menu__item {
    色: 赤 !重要;
  }
  .dropMenu-item {
    背景色: ローズブラウン;
  }
}
</スタイル>

<テンプレート>
    <!-- 機能モジュール: サブコンポーネントを使用する - カスタム イベント clickItem と handleCommand に注意してください -->
    <div class="funcModules">
      <リングアイテム
        クラス="リングアイテムスタイル"
        v-for="(item, index) in funcItems"
        :key="インデックス"
        :itemProperty="アイテム"
        @clickItem="クリックリングアイテム"
        @handleCommand="ハンドルコマンドドロップメニュー"
      />
    </div>
</テンプレート>
<スクリプト>
//1-サブコンポーネントをインポートします。import RingItem from '../Controls/RingItem'
エクスポートデフォルト{
  コンポーネント:
  //2-コンポーネントRingItemを登録します。
  },
  データ（） {
    戻る {
      //関数モジュールアイコンリソース funcItems: [
        {
          名前:「システム管理」
          url: require('../../../static/imgs/menus/management.png'),
          メニュー: ['詳細管理', '会社概要'],
        },
      ]、
    }
  },
  メソッド: {
    /**
     * RingItem サブコンポーネントのクリック イベント: 値はサブコンポーネントの発行によって渡される値です */
    クリックリングアイテム(値) {
      //サブコンポーネントのname属性値を判断し、対応するビジネスロジックを実装する switch (value.name) {
        ケース「システム管理」: {
          console.log('システム管理')
          //ページジャンプ管理センターを実行します（必要に応じてビジネスロジックを追加します）
          //this.$router.push({ パス: '/admincenter' })
          壊す
        }
      }
    },
    /**
     * RingItem サブコンポーネント: ドロップダウン メニューのクリック イベント (値はサブコンポーネントの発行によって渡される値です)
     */
    handleCommandDropMenu(値) {
      console.log(値)
       スイッチ (値.名前) {
        ケース「詳細管理」: {
          console.log('システム管理')
          //ページジャンプ管理センターを実行します（必要に応じてビジネスロジックを追加します）
          //this.$router.push({ パス: '/admincenter' })
          壊す
        }
         ケース「会社概要」: {
          console.log('システム管理')
          //ページジャンプ管理センターを実行します（必要に応じてビジネスロジックを追加します）
          //this.$router.push({ パス: '/admincenter' })
          壊す
        }
      }
    },
  },
}
</スクリプト>
<style lang="less" スコープ>
//スタイル調整</style>