Vueドロップダウンメニューのコンポーネント開発の詳細説明

<テンプレート>
  <div class="box">
     <!-- ボタンにクリック イベントを追加します -->
    <div @click="表示M">
          <!-- 第 1 レベルのボタン -->
      <スロット名="タイトル"></スロット>
    </div>
        <!-- セカンダリ ボックス -->
        
        <!-- 表示効果を非表示にするために v-if 操作を追加します -->
    <slot v-if="show" name="dropdown"></slot>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前:「ドロップダウン」、
    データ（） {
      戻る {
        // デフォルトのセカンダリボックスは閉じられています show: false
      }
    },
    メソッド: {
      表示M() {
        this.show = !this.show
      },
      commitClick(値) {
      // ドロップダウン イベントを親に公開し、値を this.$emit('change-item',value) に渡します。
      }
    }
  }
</スクリプト>

<スタイルスコープ>
  。箱 {
    display: inline-block; /* インラインブロック */
    position: relative; /* 相対的な位置指定*/
    上:100ピクセル;
    左余白:100px
  }
</スタイル>

<テンプレート>
  <div class="ドロップダウンメニュー">
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "ドロップダウンメニュー"
  }
</スクリプト>

<スタイルスコープ>
  .ドロップダウンメニュー{
    padding: 8px 0; /* ボックスの内側の余白は上が 8px、左右が 0px です */
    border-radius: 4px; /* ボックスの角を丸くする*/
    border: 1px solid #f2f6fc; /* 境界線は 1px のグレーです*/
    position: absolute; /* 絶対位置指定*/
    right: 0; /* 右側 */
    top: 110%; /* ボックスはボタンの下にあります */
    background-color: #fff; /* 背景色は白です*/
    ボックスの影: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,.04);
    /* ボックスに影を追加します */
  }
</スタイル>

<テンプレート>
  <div class="dropdown-item" @click="itemClick(値)">
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "ドロップダウンアイテム",
  プロパティ:['値'],
  データ（） {
    戻る {};
  },
  メソッド: {
    アイテムクリック(値) {
      // console.log(値)
      // 現在のコンポーネントの親の親、つまりドロップダウンの showM() メソッドを呼び出して、これを閉じます。this.$parent.$parent.showM();
      // 親の親 (ドロップダウン) の commitClick メソッドを呼び出し、値を渡します this.$parent.$parent.commitClick(value);
    },
  },
};
</スクリプト>

<スタイルスコープ>
 .ドロップダウン項目{
   line-height: 40px; /* 行の高さ 40px */
   white-space: nowrap; /* 改行なし*/
   padding: 0 20px; /* 内側の余白は上下が 0、左右が 20px です */
   color: #606266; /* フォントの色はグレーです*/
   カーソル: ポインター; /*マウスをクリックして移動します*/
 }
  .ドロップダウンアイテム:ホバー{
    color: #409eff; /* フォントの色は青です*/
    background-color: #ecf5ff; /* 背景色は明るい青にしてください*/
  }
</スタイル>

<テンプレート>
  <div id="アプリ">
    <ドロップダウン @change-item="変更項目">
      <button slot="title">ボタン</button>
      <ドロップダウンメニュースロット="ドロップダウン">
        <dropdown-item value="食べ物">食べ物</dropdown-item>
        <dropdown-item value="ドリンク">ドリンク</dropdown-item>
        <dropdown-item value="再生">再生</dropdown-item>
      </ドロップダウンメニュー>
    </ドロップダウン>
  </div>
</テンプレート>

<スクリプト>
  './components/common/dropdown' からドロップダウンをインポートします
  「./components/common/dropdownMenu」からドロップダウンメニューをインポートします。
  「./components/common/dropdownItem」からdropdownItemをインポートします。
  エクスポートデフォルト{
    名前: 'アプリ'、
    コンポーネント:
      ドロップダウン、ドロップダウンメニュー、ドロップダウンアイテム
    },
    方法:{
      変更項目(e){
        コンソール.log(e)
      }

    }
  }
</スクリプト>

「@/components/common/dropdown」からzgDropdownをインポートします。
「@/components/common/dropdownMenu」からzgDropdownMenuをインポートします。
「@/components/common/dropdownItem」からzgDropdownItemをインポートします。
Vue.component('zgDropdownItem',zgDropdownItem)
Vue.component('zgDropdown',zgDropdown)
Vue.component('zgDropdownMenu',zgDropdownMenu)

<テンプレート>
  <div id="アプリ">
    <zg-dropdown @change-item="変更項目">
      <button slot="title">ボタン</button>
      <zg-dropdown-menu slot="ドロップダウン">
        <zg-dropdown-item value="食べ物">食べ物</zg-dropdown-item>
        <zg-dropdown-item value="ドリンク">ドリンク</zg-dropdown-item>
        <zg-dropdown-item value="再生">再生</zg-dropdown-item>
      </zg-ドロップダウンメニュー>
    </zg-dropdown>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'アプリ'、
    方法:{
      変更項目(e){
        コンソール.log(e)
      }

    }
  }
</スクリプト>
<スタイルスコープ>

</スタイル>