Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明

ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーすると特定の（mouseenter）イベントが周期的に呼び出され、最終的にエラーが発生する。

処理

注: バージョン 2.13.2 では、この問題を回避するには、サブメニューの属性を popper-append-to-body="false" に設定するだけで済みます。

エラーメッセージは次のとおりです。

キャッチされない RangeError: 最大呼び出しスタックサイズを超えました。
VueComponent.handleMouseenter (index.js:1) で
呼び出し時にエラー処理 (vue.js:1863)
HTMLLIElement.invoker (vue.js:2188) で
HTMLLIElement.original._wrapper (vue.js:7547) で
VueComponent.handleMouseenter (index.js:1) で
呼び出し時にエラー処理 (vue.js:1863)
HTMLLIElement.invoker (vue.js:2188) で
HTMLLIElement.original._wrapper (vue.js:7547) で
VueComponent.handleMouseenter (index.js:1) で
呼び出し時にエラー処理 (vue.js:1863)

テストコード

バージョン:

ヴュー: v2.6.11
要素UI: 2.13.0

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <!-- スタイルをインポート -->
  <link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="外部 nofollow" >
 </head>
 <本文>

  <div id="ルート">
   <el-menu mode="horizontal">
    <template v-for="(menu,index) メニュー内">
     <サブメニュー v-if="menu.children && menu.children.length" :key="index" :item="メニュー"></サブメニュー>
     <el-menu-item v-else :index="menu.path" :key="index">{{ menu.title }}</el-menu-item>
    </テンプレート>
   </el-menu>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- コンポーネント ライブラリをインポートします-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="text/javascript">
   Vue.component('サブメニュー', {
    プロパティ: ['アイテム'],
    テンプレート: `
     <el-submenu :index="item.path">
      <テンプレートスロット="タイトル">
       {{item.title}}
      </テンプレート>
      <template v-for="(child,index) in item.children">
       <サブメニュー v-if="child.children" :item="child" :key="index"></サブメニュー>
       <el-menu-item v-else :key="index" :index="child.path">
        {{child.title}}
       </el-menu-item>
      </テンプレート>
     </el-サブメニュー>
    `
   })

   vm = new Vue({
    el: '#root',
    データ（） {
     戻る {
      メニュー: [{
       タイトル:「私のワークベンチ」
       パス: '2',
       子供たち： [{
         タイトル: 「オプション 1」
         パス: '2-1'
        },
        {
         タイトル: 「オプション 2」
         パス: '2-2',
        },
       ]、
      },{
       タイトル:「バックグラウンド管理」、
       パス:'3'
      }]
     }
    },
    コンポーネント: {}
   })
  </スクリプト>
 </本文>
</html>

エラー分析

再帰的に生成されたナビゲーションバーコードとエラーコードを確認します。

 handleMouseEnter: 関数(e) {
                    var t = これ
                      , i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this.showTimeout;
                    if (ウィンドウ内の "ActiveXObject" || "focus" !== e.type || e.relatedTarget) {
                        var n = this.rootMenu
                          , r = this.disabled;
                        "クリック" === n.menuTrigger && "水平" === n.mode || !n.collapse && "垂直" === n.mode || r || (this.dispatch("ElSubmenu", "mouse-enter-child"),
                        タイムアウトをクリアします(this.timeout)、
                        this.timeout = setTimeout(関数() {
                            t.rootMenu.openMenu(t.index, t.indexPath)
                        }、 私）、
                        this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent("mouseenter")));//エラーコード}
                },

これは、イベントのバブリングまたはシンクによって、要素が mouseenter イベントを繰り返しディスパッチおよび受信し、無限ループのような状態になるからだと思います。時間の制約により、詳細には触れませんでした。後で時間があるときに根本的な原因を確認します (覚えていれば...)

マウスがメニュー内に移動すると、handleMouseenter メソッドがトリガーされますが、appendToBody が true であるため、マウスの Enter イベントが再度ディスパッチされ、このメソッドに戻り、無限ループが発生します。 appendToBody は計算プロパティですが、なぜ appendToBody が true なのでしょうか?コードを見てみましょう:

{
 名前: 'ElSubmenu',
    コンポーネント名: 'ElSubmenu',
 小道具:{
  ポッパーをボディに追加: {
         タイプ: ブール値、
         デフォルト: 未定義   
        }
    },
    計算:{
  本文に追加() {
        this.popperAppendToBody === undefined を返します     
          ? this.isFirstLevel //popperAppendToBody が明示的に指定されていない場合は、この値を計算します: this.popperAppendToBody;
      },
      isFirstLevel() {
        isFirstLevel を true にします。
        親を this.$parent とします。
        while (親 && 親 !== this.rootMenu) {
        
        //現在のメニューが最初のレベルであるかどうかを計算します。
        // コードでは現在のコンポーネント名がcomponentName: 'ElSubmenu'であると指定されているため問題ないようです。しかし、デバッグ中にcomponentNameの値がUndefinedであることが判明したため、どのレベルであっても最終結果はisFirstLevel = trueになります。 
          if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
            isFirstLevel = false;
            壊す;
          } それ以外 {
            親 = 親.$parent;
          }
        }
        isFirstLevel を返します。
      }
 }
}

Vue がコンポーネント登録時にこのパラメータを収集しなかった理由については、まだソースコードを見る必要があります。昼休みも終わり、コーディングを続けなければなりません...時間があるときにもう一度解析します...

処理

el-submenu に属性を追加します: popper-append-to-body="true false" を追加して、appendToBody を明示的に false に指定します。

特別なお詫び：

以前の処理方法は間違って記述されていました。popper-append-to-body="true" と記述されていました。そのため、この属性を追加してもエラーが報告されます。申し訳ありません！

Element-ui NavMenu サブメニューの再帰生成を使用する際のエラーの詳細な説明に関するこの記事はこれで終わりです。Element-ui NavMenu サブメニューの再帰生成に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: