layui+vue 菜单的问题

Question

本人layui、vue初学者.

要实现的功能：通过vue组件代替静态页面的menu（菜单）

静态页面代码如下：

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed" v-for="">
                    <a class="" href="javascript:">管理者视图1</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">列表一</a></dd>
                        <dd><a href="javascript:">列表二</a></dd>
                        <dd><a href="javascript:">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <!--<menu-item></menu-item>-->
            </ul>
        </div>
    </div>

操作工程如下：

1、layui菜单部分，初始化完成后会在</ul>中增加一个

<span class="layui-nav-bar" style="top: 22.5px; height: 0px; opacity: 0;"></span>

2、我用vue替换后，代码如下：

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <menu-item></menu-item>
            </ul>
        </div>
</div>

var menuItem = Vue.extend({
    name:'menu-item',
    props:{item:{},index:0},
    template:[
        '<li class="layui-nav-item layui-nav-itemed">',
        '<a class="" href="javascript:">管理者视图</a>',
        '<dl class="layui-nav-child">',
        '<dd v-for="n in 3"><a href="javascript:">列表{{n}}</a></dd>',
        '</dl>',
        '</li>'
    ].join('')
});
//注册菜单组件
Vue.component('menu-item',menuItem);

var vm = new Vue({
    el:'#app'
})

3、发现</ul>上一行增加的代码为：

<span class="layui-nav-bar"></span>

缺少样式 ，导致菜单无法使用。怀疑是html先初始化，这时候没有<li>导致的。但不知如何解决

请各位予以指导

Answer 1

最后的代码能贴出来看下吗 我layui vue小菜，刷新页面左侧菜单有时候能点开 有时候点不开！多谢！

 

Answer 2

我这里说个特别情况,供后来的人参考.

尽量要在VUE把menu-item渲染完之后再执行layui的初始化代码.如果在menu-item渲染之前执行layui的初始化代码,那么layui检测不到尚未渲染出来的DOM

比如,menu-item是通过ajax请求再通过vue渲染出来的.

 

Answer 3

一语道破天机，感谢

Answer 4

再请教个问题，layui能同时适配pc和手机端吗？

Answer 5

回复
可以的

Answer 6

回复
layui 有栅格系统，可以做响应式

Answer 7

element.init()