`

前端框架iviewui使用示例之menu

iview 
阅读更多
　　官方文档对非模板模式(非 template/render 模式)语焉不详，一个简单的例子调了好长时间，贴一下代码，帮助一下同道中人。
　　调试代码，注意修改js、css的路径。官方网站可以下载。 

<!DOCTYPE html>

<!-- 
 作者：wallimn
 博客：http://wallimn.iteye.com
 时间：2017-11-22
 -->
<html>
<head>
    <meta charset="utf-8">
    <title>iview菜单示例</title>
    <link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="iview/iview.js"></script>
	<style type="text/css">
    
</style>
</head>
<body>
<div id="app2">
    <i-menu mode="horizontal" :theme="menuTheme" active-name="1" @on-select="onMenuSelect">
        <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="stats-bars"></Icon>特邀专家
            </template>
            <Menu-Group title="国际专家">
                <Menu-Item name="3-1">张无忌</Menu-Item>
                <Menu-Item name="3-2">赵　敏</Menu-Item>
                <Menu-Item name="3-3">张三丰</Menu-Item>
            </Menu-Group>
            <Menu-Group title="国内专家">
                <Menu-Item name="3-4">萧　峰</Menu-Item>
                <Menu-Item name="3-5">虚　竹</Menu-Item>
            </Menu-Group>
        </Submenu>
        <Menu-Item name="4">
            <Icon type="settings"></Icon>http://wallimn.iteye.com
        </Menu-Item>
    </i-menu>
    <br>
    <p>修改主题</p>
    <Radio-Group v-model="menuTheme">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
        <Radio label="primary"></Radio>
    </Radio-Group></div>

	<script type="text/javascript">
		var vue = new Vue({
			el:'#app2',
			data:function(){
				return {
	            	menuTheme: 'primary'
				};
	        },
	        methods:{
	            onMenuSelect:function(name){
	            	console.log(name," is clicked!");
	            	if(name==="4"){
	            		window.location.href='http://wallimn.iteye.com';
	            	}
	            }
			}
		});
	</script>
</body>
</html>


总结一下：
1.有些元素要加上i-前缀，官方文档都有提示，如Menu改写为i-menu。但有些不需要加，如Icon，很让人困惑。
2.驼峰写法的元素，要用下划线分开。如MenuItem，要改写为menu-item。
3.查看网页源码，如果自定义元素没有被解析，就是写法不对。
分享到：
| Flyway错误：migration checksum mismatch ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics