1、首先直接参照官网Demo例子，将代码拷贝进项目中运行，

直接报错：

Cannot read property 'mode' of undefined.

然后查看官网介绍，有一行注意文字，好吧。

2、然后将Menu标签改为i-menu.

这下没有报错了，但是样式显示的根本不是想要的：

什么个鬼，然后官网也没有其他什么说明了。。。。

OK，找度娘查找资料，找到这篇文章：http://wallimn.iteye.com/blog/2400663

原来还有几个标签必须得改掉才行：

1、MenuItem  修改为：  Menu-Item

2、 <Icon type="ios-paper" /> 修改为：<Icon type="ios-paper" ></Icon>     (标签必须写完整，Icon标签后文字显示不出来，这是什么骚操作。。。。)

3、RadioGroup 修改为： Radio-Group

修改为之后，效果OK了，真是坑，按照官网介绍，并没有指出这些组件必须要这样写，只是粗略的说了一些，大概可能也许还是我太菜鸟了，这么简单的问题还花了不少时间：

(官网：https://www.iviewui.com/docs/guide/start#TBTX)

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

  • Button: i-button
  • Col: i-col
  • Table: i-table
  • Input: i-input
  • Form: i-form
  • Menu: i-menu
  • Select: i-select
  • Option: i-option
  • Progress: i-progress
  • Time: i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

  • Switch: i-switch
  • Circle: i-circle

附完整示例代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>iview example</title>

    <link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" />

    <script src="~/lib/vue2.5.17/vue.min.js"></script>

    <script src="~/lib/iview3.1.4/iview.min.js"></script>

</head>

<body>

    <div id="app">

        <template>

            <i-menu mode="horizontal" :theme="theme1" active-name="1">

                <Menu-Item name="1">

                    <Icon type="ios-paper" ></Icon>

                    内容管理

                </Menu-Item>

                <Menu-Item name="2">

                    <Icon type="ios-people"  ></Icon>

                    用户管理

                </Menu-Item>

                <Submenu name="3">

                    <template slot="title">

                        <Icon type="ios-stats"  ></Icon>

                        统计分析

                    </template>

                    <MenuGroup title="使用">

                        <Menu-Item name="3-1">新增和启动</Menu-Item>

                        <Menu-Item name="3-2">活跃分析</Menu-Item>

                        <Menu-Item name="3-3">时段分析</Menu-Item>

                    </MenuGroup>

                    <MenuGroup title="留存">

                        <Menu-Item name="3-4">用户留存</Menu-Item>

                        <Menu-Item name="3-5">流失用户</Menu-Item>

                    </MenuGroup>

                </Submenu>

                <Menu-Item name="4">

                    <Icon type="ios-construct"  ></Icon>

                    综合设置

                </Menu-Item>

            </i-menu>

            <br>

            <p>Change theme</p>

            <Radio-Group v-model="theme1">

                <Radio label="light"></Radio>

                <Radio label="dark"></Radio>

                <Radio label="primary"></Radio>

            </Radio-Group>

        </template>

        </div>

        <script type="text/javascript">

            var vue = new Vue({

                el: '#app',

                data: {

                    theme1: 'primary'

                }

            });

        </script>

</body>

</html>

使用Iview Menu 导航菜单(非 template/render 模式)的更多相关文章

  1. 【vue2.X+iview2.x】iView在非 template/render 模式下标签的转化

    iView在非 template/render 模式下标签的转化. 以下组件,在非 template/render 模式下组件名要分隔: DatePicker:date-picker FormItem ...

  2. iview 非 template/render 标签转换

    在 非 template/render情形下使用 iview,发现除了官方的一些需要注意的点外,还有一些其他需要注意的,这里记录下,防踩坑: 官方说明: 在非 template/render 模式下( ...

  3. BootstrapBlazor实战 Menu 导航菜单使用(1)

    实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql ...

  4. B08. BootstrapBlazor实战 Menu 导航菜单使用(2)

    接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 3.项目模板 节省时间,直接使用 Bootstrap Blazor App 模板快速搭建项目 传送门: https ...

  5. Iview 中 获取 Menu 导航菜单 选中的值

    期望效果: 原来,我用的是脚本来控制,然后........,再然后,我再去仔细看官方文档的时候,才发现,Menu组件 有那么两个事件,on-select 和 on-open-change ,好气啊,之 ...

  6. NavMenu 导航菜单

    顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-colo ...

  7. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  8. Orchard扩展 自定义后台管理导航菜单 Admin Menu

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径.     看本文需要对Orchard大致体系, 特别是Mo ...

  9. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

随机推荐

  1. C++备忘知识整理

    一.设置字体颜色 C++控制台程序运行时输出框默认的文字颜色是白色,所以我常称其输出框为黑白框.但是这个文字样式不是固定不变的,是可以改变颜色的字体的.方法有两种: 1.设置输出框的框体属性.在运行时 ...

  2. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  3. TortoiseSVN 分支创建与合并

    前提准备: 确保本地Work Copy 和 服务器上的 版本一致.( 所有代码都提交到SVN,并update一次) 1  从主干创建分支代码 在本地Work Copy  选中项目文件夹,鼠标右键选择 ...

  4. vue根据:data-属性值绑定控制class变化

    checked的初始值 小bug: v的checked有被修改,但没有被渲染到页面中. 试了子组件修改后的值传回父组件没用. 最后修改数据后调用this.$forceUpdate();即可重新渲染,样 ...

  5. 一点一点看JDK源码（二）java.util.List

    一点一点看JDK源码(二)java.util.List liuyuhang原创,未经允许进制转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.综述 List译为表,一览表, ...

  6. 用 crontab 实现开机自动运行脚本

    开发「bufpay.com 个人即时到账收款平台」的时候,订单状态和支付二维码的状态如果过期了要实时修改状态,最大效率利用支付二维码. 过期脚本需要开机启动,并且 deamon 运行,有很多办法可以开 ...

  7. ExcludeClipRect区域裁剪问题

    CPaintDC dc(this); CRect rt1; CPen newPen; newPen.CreatePen(PS_SOLID,1,RGB(0,0,0)); CPen *pOldPen = ...

  8. 复习宝典之Git分布式版本控制

    查看更多宝典,请点击<金三银四,你的专属面试宝典> 第三章:Git分布式版本控制 1)git文件状态 git中的文件有以下几种状态: 未跟踪(untrack):表示文件为新增加的. 已修改 ...

  9. SSM整合时初始化出现异常

    java.lang.NoClassDefFoundError: org/aspectj/weaver/reflect/ReflectionWorld$ReflectionWorldException  ...

  10. JavaScript中Array的正确使用方式

    在 JavaScript 中正确使用地使用 Array 的方法如下: 用 Array.includes 代替 Array.indexOf “如果你要在数组中查找元素,请使用 Array.indexOf ...