layui導(dǎo)航欄二級菜單不顯示問題及解決

更新時間：2023年05月19日 10:34:36 作者：清啊清小青

這篇文章主要介紹了layui導(dǎo)航欄二級菜單不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

layui導(dǎo)航欄二級菜單不顯示

問題描述

在使用layui 中的導(dǎo)航欄組件時，除了默認(rèn)打開的第一個，其他的導(dǎo)航只能顯示出一級的導(dǎo)航，

原因

查看layui 的官方文檔，可以發(fā)現(xiàn)layui 的導(dǎo)航目錄時依賴于element 的，所以我們需要創(chuàng)建一個element

解決方法

創(chuàng)建layui 下的element 即可

示例代碼

1.Vue 項目中：

 <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a _href='#'>
                <i class="layui-icon layui-icon-home"></i>
                <cite>首頁</cite>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a  _index="0">項目介紹</a>
                </dd>
                <dd>
                  <a  _index="1">分析頁</a>
                </dd>               
              </dl>
            </li>
            <li class="layui-nav-item">
              <a _href='#' v-on:click="chufa">
                <i class="layui-icon layui-icon-set-fill"></i>
                <span>系統(tǒng)管理</span>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >用戶管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >角色管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜單管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >登錄日志</a>
                </dd>
              </dl>
            </li>
          </ul>

2.需要添加的代碼如下：

在當(dāng)前Vue 文件的mounted鉤子函數(shù)中添加以下的代碼：

mounted() {
this.$nextTick(() => {
  //導(dǎo)航欄依賴于 element 因此下面的代碼是必須的否則二級導(dǎo)航內(nèi)容就會不顯示
  layui.use("element", function() {
    var element = layui.element;
  });    
});

結(jié)果對比

1.沒加代碼之前

2.加上代碼之后：

layui中的一些問題

使用layui（版本號2.4.5）,在引入js,css之后：

水平導(dǎo)航欄二級菜單一直不能顯示

<script>
? ? ? ? layui.use('element', function(){
? ? ? ? ? ? var element = layui.element;
? ? ? ? ? ? element.on('nav(filter)', function(elem){
? ? ? ? ? ? ? ? console.log(elem); //得到當(dāng)前點擊的DOM對象
? ? ? ? ? ? });
? ? ? ? });
? ? </script>

解決辦法：最后發(fā)現(xiàn)layui.all.js引入不能放在head標(biāo)簽內(nèi)，需要在body最后面引入即可。

使用layer.open 中的iframe彈框，關(guān)閉失敗的問題

最開始解決辦法，根據(jù)官網(wǎng)示例：即

var index = layer.open({
?? ?……
});
layer.close(index)；/ ? layer.closeAll()

但是使用這種兩種方法發(fā)現(xiàn)怎么都關(guān)閉不了，后來再仔細(xì)看官方文檔時發(fā)現(xiàn)關(guān)閉iframe 需要使用下面的方法

//當(dāng)你在iframe頁面關(guān)閉自身時
var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
parent.layer.close(index); //再執(zhí)行關(guān)閉 ??

最后測試完美解決