javascript - iview 有些组件不能使用的问题报错，通过scirpt 标签引入的方式。
本文介绍了javascript - iview 有些组件不能使用的问题报错，通过scirpt 标签引入的方式。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
控制台报错 Cannot read property 'mode' of undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iview example</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/iview.css" />
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/js/iview.min.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/index.css">
<style type="text/css" media="screen">
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
}
.layout-assistant{
width: 300px;
margin: 0 auto;
height: inherit;
}
.layout-breadcrumb{
padding: 10px 15px 0;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
</style>
</head>
<template id="list">
<h2>这里是列表标题</h2>
</template>
<body>
<div id="app">
<div class="layout">
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<Menu-item name="1">
<Icon type="ios-navigate"></Icon>
导航一
</Menu-item>
<Menu-item name="2">
<Icon type="ios-keypad"></Icon>
导航二
</Menu-item>
<Menu-item name="3">
<Icon type="ios-analytics"></Icon>
导航三
</Menu-item>
<Menu-item name="4">
<Icon type="ios-paper"></Icon>
导航四
</Menu-item>
</div>
</Menu>
<Menu mode="horizontal" active-name="1">
<div class="layout-assistant">
<Menu-item name="1">二级导航</Menu-item>
<Menu-item name="2">二级导航</Menu-item>
<Menu-item name="3">二级导航</Menu-item>
</div>
</Menu>
<div class="layout-content">
<Row>
<i-col span="5">
<Menu active-name="1-2" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
导航一
</template>
<Menu-item name="1-1">选项 1</Menu-item>
<Menu-item name="1-2">选项 2</Menu-item>
<Menu-item name="1-3">选项 3</Menu-item>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
导航二
</template>
<Menu-item name="2-1">选项 1</Menu-item>
<Menu-item name="2-2">选项 2</Menu-item>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
导航三
</template>
<Menu-item name="3-1">选项 1</Menu-item>
<Menu-item name="3-2">选项 2</Menu-item>
</Submenu>
</Menu>
</i-col>
<i-col span="19">
<div class="layout-content-main">内容区域</div>
</i-col>
</Row>
</div>
<div class="layout-copy">
2011-2016 © TalkingData
</div>
</div>
</div>
<script>
Vue.use(iview);
new Vue({
el: '#app',
component:{
iview
},
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
<script src="mock/menu_data.js"></script>
</body>
</html>
解决方案
非 template/render 模式下，使用 i-menu即可
这篇关于javascript - iview 有些组件不能使用的问题报错，通过scirpt 标签引入的方式。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
