使用Iview Menu 導航選單(非 template/render 模式)
阿新 • • 發佈：2018-12-02
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>