vue element-ui 搭建侧边栏
2023-09-27 14:27:48 时间
样式
main.js
import Vue from 'vue'
import App from './App.vue'
//全部引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
//按需引入
import {Button, Radio, Select, Container, Aside, Header, Main, Menu, MenuItem, MenuItemGroup, Submenu} from 'element-ui';
import router from './router.js'
Vue.component(Select.name, Select);
Vue.component(Radio.name, Radio);
Vue.use(Button)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
侧边栏组件
CommonAside.vue
<template>
<!-- default-active 默认展开项目-->
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="isCollapse">
<h3>通用后台管理系统</h3>
<el-menu-item :index="item.path" v-for="item in noChildren " :key=item.path @click="clickMenu(item)">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<el-submenu :index="item.label" v-for="item in hasChildren" :key=item.path>
<template slot="title">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex"
@click="clickMenu(item)">
<i :class="'el-icon-'+subItem.icon"></i>
<span slot="title">{{ subItem.label }}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<style lang="scss" scoped>
.el-menu {
height: 100%;
border: none;
h3 {
color: #ffffff;
text-align: center;
line-height: 48px;
}
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
name: "CommonAside",
data() {
return {
//展开 还是折叠
isCollapse: false,
menu: [
{path: "/", name: "home", label: "首页", icon: "s-home", url: "Home/Home"},
{path: "/mall", name: "mall", label: "商品管理", icon: "video-play", url: "MallManage/MallManage"},
{path: "/user", name: "user", label: "用户管理", icon: "user", url: "UserManage/UserManage"},
{
label: "其他",
icon: "location",
children: [
{path: "/page1", name: "page1", label: "页面1", icon: "setting", url: "Other/PageOne"},
{path: "/page2", name: "page2", label: "页面2", icon: "setting", url: "Other/PageTwo"},
]
},
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
clickMenu(item) {
this.$router.push({name: item.name});
}
},
computed: {
noChildren() {
return this.menu.filter((item) => !item.children);
},
hasChildren() {
return this.menu.filter((item) => item.children);
}
}
}
</script>
main.vue组装到上面
<template>
<el-container style="height: 100%">
<el-aside width="auto">
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
import CommonAside from '../components/CommonAside.vue'
export default {
name: "Main",
components: {CommonAside}
}
</script>
<style lang="scss" scoped>
.el-header {
background: #333;
}
.el-main {
padding-top: 0;
}
</style>
main.vue是通过router.js配置上去的
import Vue from 'vue'
import VueRouter from 'vue-router'
//自定义页面
import Main from './views/Main.vue'
//安装路由到vue
Vue.use(VueRouter)
const routes = [
{path: '/', name: 'Main', component: Main},
//路由的懒加载
{path: '/about', name: 'About', component: () => import( './views/About.vue')},
]
const router = new VueRouter({
//模式
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
App.vue就很简单了
<template>
<router-view/>
</template>
<script>
export default {
data() {
return {
radio: '1'
};
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0;
}
</style>
有点难以搞懂的bug需要配置这里一个样式 否则达不到预期效果
<style>
body {
margin: 0;
}
html, body {
height: 100%;
}
</style>
相关文章
- vue - index.html
- Vue + element-ui 【前端项目一】Table 表格并实现分页 2
- Vue - 获取 UI 组件库 <upload> 上传组件返回的 File 对象文件扩展名,拿到 Ant Design Vue / Element UI 等组件库的上传组件返回 File 文件的后缀名
- Vue+Element开源后台管理UI
- 【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发
- vue技术分享之你可能不知道的7个秘密
- vue页面转发
- vue 使用element-ui实现table表单列展示与隐藏
- 后台(一)vue+element-ui(全局配置)
- vue.js相关UI组件收集
- Vue知识点总结(4)——v-on(超级详细)
- vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现
- 【vue init】二.项目使用vue-router,引入ant-design-vue的UI框架,引入less
- Vue(element ui)中行操作row参数的使用
- vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决
- vue学习:使用v-for向select组件绑定数据
- Vue学习第36天——PC端和移动端常用的Vue UI组件库
- spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框
- spring boot + vue + element-ui全栈开发入门——windows开发环境
- spring boot + vue + element-ui全栈开发入门——开篇
- 懒人必备:使用vue ui创建vue项目
- Vue指令语法汇总
- Vue中css的 /deep /及 >>> 的用法