vue+element 後臺管理系統（四）導航
<!DOCTYPE html>
<html>javascript
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/element.css" />
</head>
<body>
<div id="app">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">個人工做臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4">訂單管理</el-menu-item>
</el-menu>
<div class="left_nav">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened >
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航二</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/element.js" ></script>
<script>
new Vue({
el: '#app',
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>
！css
相關文章
- 1. 後臺管理系統導航欄總結
- 2. 導出表格 -後臺管理系統
- 3. RuoYi-後臺管理系統
- 4. 後臺管理系統
- 5. HTML--後臺管理系統
- 6. extjs5 後臺管理系統
- 7. SpringBoot後臺管理系統
- 8. zjsy後臺管理系統
- 9. adminkit 後臺管理系統
- 10. LaraCMS 後臺管理系統
- 更多相關文章...
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • ionic 導航 - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 後臺管理系統導航欄總結
- 2. 導出表格 -後臺管理系統
- 3. RuoYi-後臺管理系統
- 4. 後臺管理系統
- 5. HTML--後臺管理系統
- 6. extjs5 後臺管理系統
- 7. SpringBoot後臺管理系統
- 8. zjsy後臺管理系統
- 9. adminkit 後臺管理系統
- 10. LaraCMS 後臺管理系統