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

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

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

カスタムコンポーネントを作成します。非常にシンプルなドロップダウンメニュー、つまりアイデア全体です。

ステップ 1:プロジェクト内にカスタム コンポーネントを保存するためのフォルダーを作成します (コンポーネントの直下の common 内)

dropdown.vueは第一レベルのボックスです

dropdownMenu.vueはセカンダリボックスです

dropdownItem.vueはセカンダリボックスコンテンツです

ステップ2:

dropdown.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; /* 背景色は明るい青にしてください*/
  }
</スタイル>

次にApp.vueファイルを操作します

<テンプレート>
  <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)
      }

    }
  }
</スクリプト>

main.jsにコンポーネントをインポートする

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

app.vueもそれに応じて変更する必要があります

<テンプレート>
  <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)
      }

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

</スタイル>

大体こんな感じです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ライフサイクルにおけるコンポーネント化をご存知ですか?
  • Vue コンポーネントの学習範囲を限定した詳細な説明
  • Vue コンポーネント開発に必須のスキル: コンポーネントの再帰
  • Vueコンポーネント化の基本的な使用方法の詳細
  • Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信
  • Vueのコンポーネント化を一緒に学びましょう

<<:  MySQL ログインおよび終了コマンドの形式

>>:  Zabbixを使用してMySQLを監視する方法

推薦する

Linuxでブーストライブラリをインストールするための完全な手順

序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...

a href=# と a href=javascript:void(0) の違いの詳細な説明

a href="#"> リンクをクリックすると、ページがページ上部までスク...

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

MySQL ビューの原則と使用例の概要

この記事では、MySQL ビューの原理と使用法についてまとめます。ご参考までに、詳細は以下の通りです...

JavaScript の手ぶれ補正とスロットリングの詳細な説明

目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...

5つのクールで実用的なHTMLタグと属性の紹介

実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...

HTMLフォームタグチュートリアル(1):

フォームは、動的な Web ページを実装するための主要な外部フォームです。フォームとフォーム フィー...

Nodeはkoa2を使用してシンプルなJWT認証方式を実装します

JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...

MySQL Innodbインデックスの原理の詳細な説明

導入振り返ってみると、4年前、私がMySQLのインデックスについて学んでいたとき、先生はインデックス...