element el-menu自定义样式

效果:
在这里插入图片描述

代码:

<template>
	<div class="">

		<el-container>
			<el-aside width="wth">

				<el-menu default-active="1" :unique-opened="true" @open="handleOpen" @close="handleClose">


					<el-submenu index="1">

						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>

						<el-row :gutter="1" class="item-view">
							<el-col :span="12">
								<el-menu-item index="1-1">选项1</el-menu-item>
							</el-col>
							<el-col :span="12">
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-col>
						</el-row>


					</el-submenu>

					<el-submenu index="2">

						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航2</span>
						</template>

						<el-row :gutter="1" class="item-view">
							<el-col :span="12">
								<el-menu-item index="2-1">选项3</el-menu-item>
							</el-col>
							<el-col :span="12">
								<el-menu-item index="2-2">选项4</el-menu-item>
							</el-col>
						</el-row>


					</el-submenu>




				</el-menu>

			</el-aside>
			<el-container>
				<el-main>Main</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				wth: '237px'
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}

	.el-aside {
		width: 237px;
		height: 1080px;
		background-image: url(../../assets/left-bg.png);
		background-size: 100% 100%;
		/* background-color: #0055ff; */
		color: #333;
		text-align: center;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
	}



	.item-view {
		padding-left: 1px;
		padding-right: 1px;
		margin-top: 1px;
	}

	.el-submenu {
		margin-top: 1px;
	}

	.el-submenu .el-menu-item {
		height: 100px;
		line-height: 100px;
		padding: 0 0px;
		padding-left: 0px;
		min-width: 0 !important;
	}

	.el-submenu__title {
		background-color: #0263a3;
		color: #FFFFFF;
	}

	.el-submenu__title:focus,
	.el-submenu__title:hover {
		outline: 0;
		background-color: #0263a3;
	}

	.el-menu-item {
		color: #FFFFFF;
		padding-left: 0 !important;
		background-color: rgba(2, 101, 154, 0.5);
	}

	.el-menu-item:focus,
	.el-menu-item:hover {
		outline: 0;
		background-color: #0263a3;
		color: #FFFFFF;
	}

	.el-menu {
		/* border-right:0px !important; */
		width: 237px;
		background-color: transparent;
	}

	.el-aside {
		color: #FFFFFF;
	}
</style>

Vue 和 SCSS 结合使用时,如果你想修改 Element Plus 中的 `.el-menu--horizontal` 样式,首先你需要做到以下几点: 1. **安装依赖**:确保你在项目中已经安装了 Vue CLI 和 SCSS 预处理器。如果还没有,可以运行 `npm install -D node-sass sass-loader vue-cli-plugin-vuex` 或者 `yarn add node-sass sass-loader vue-cli-plugin-vuex`。 2. **配置 SCSS**:在 `vue.config.js` 文件中添加 SCSS 的配置,例如: ```javascript module.exports = { css: { loaderOptions: { sass: { data: ` @import "~element-plus/lib/theme-chalk/index.scss"; `, }, }, }, }; ``` 3. **创建主题文件**:在 `src/assets/scss` 目录下(假设存在),创建一个新的 SCSS 文件,比如 `custom-theme.scss`,然后针对 `.el-menu--horizontal` 类编写自定义样式: ```scss // custom-theme.scss .el-menu--horizontal { /* 这里添加你想要修改的样式 */ background-color: #your-color; color: #your-text-color; /* 可能需要调整的其他属性 */ } ``` 4. **应用新主题**:在需要应用这个主题的地方,如 App.vue 或者某个具体的组件中,导入并使用自定义主题: ```html <style scoped> @import './assets/scss/custom-theme.scss'; </style> ``` 5. **刷新样式**:保存更改后,通过刷新浏览器或者使用 `npm run serve` 或 `yarn dev` 来看到更新后的效果。 记得检查是否覆盖了 Element Plus 自带的主题,以免影响其他功能。如果你有特殊需求,也可以考虑使用 CSS Modules 或者 Less 等其他预处理器。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值