element-ui 样式重置

最新推荐文章于 2023-11-02 21:57:03 发布
最新推荐文章于 2023-11-02 21:57:03 发布
阅读量1k 收藏
点赞数
分类专栏： vue element-ui js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40896095/article/details/119331168
版权
js 同时被 3 个专栏收录
34 篇文章 1 订阅
订阅专栏
vue
19 篇文章 0 订阅
订阅专栏
element-ui
15 篇文章 0 订阅
订阅专栏

原来没有记录过，今天简单记录element-ui 样式重置过程（自己遇到的）

menu

  • 菜单悬浮背景,根据自己所需更改
.el-menu-item:hover {
  background-color: transparent !important;
}
  • 菜单背景
.el-menu{
background-color:transparent !important;
}

菜单下划线,选中，选中之前的下划线在.el-menuclass中重置

.el-menu--horizontal>.el-menu-item.is-active{
background-color:transparent !important;
/*字体等等*/
}

后面持续更新，遇到一次记录一次
更新中…
本文连接：点击
博主个人小博客：嘿嘿

前端小蜜蜂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
项目中如何修改element-ui的默认样式
L_squan的博客
06-11 113
1、可以去除scoped样式来更改 如果还更改不了可以加 !import 即权重 2、也可以穿透 这样就不需要去除scoped属性 直接 用 >>> <style scoped > .a >>> b.{ width:50px } </style> 3、如果使用的是sass、less 可以 用 /deep/ <style scoped > .a /deep/ b.{ width:50px } </styl
修改el-menu样式
最新发布
qq_50386946的博客
11-02 1649
【代码】修改el-menu样式。
element-ui 导航栏的样式修改
weixin_44479794的博客
05-16 3851
::v-deep .el-menu-item { background-color: #EBEEF5; height: 20px; line-height: 20px; } .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title { height: 20px; line-height: 20px; } .el-submenu /deep/ .el-subme
vue局部修改elementUI组件样式
curry0711的博客
12-24 2364
全局修改：style样式去掉scoped就可以达到效果，例： <style> /* 导航栏样式更改 */ .el-submenu .el-menu-item { background: #1f2d3d !important; } .el-submenu .el-menu-item:hover { background: #001528 !important; } /* 去除导航栏右侧白线 */ .el-menu { border-right: 0; } </style>
el-table、el-menu、el-tree样式重置
qq_42129143的博客
09-29 1425
el-table样式重置、el-menu样式重置、el-tree样式重置
element-ui 2.15.14版本
10-09
免费下载、免费下载、免费下载，下载后挂载nginx、tomcat、apache服务器下运行，也可以使用vs code打开使用live server访问
svelte-element-ui
02-16
什么是svelte-element-ui？ svelte-element-ui是基于Svelte的element-ui组件库。 安装 从npm安装。 npm install svelte-element-ui 在svelte文件中导入css。 < script lang =" ts " > import 'svelte-...
element-ui资源包
08-03
前端使用非常多的element-ui，直接将文件夹拷入到项目中即可
HTML+Element-ui邮件管理前端界面
07-12
--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> ...
el-menu刷新回到默认
weixin_57166400的博客
12-27 1247
一般在写后台管理系统，使用menu组件，每个都是一条路由，然而，有时候我们在某个路由上刷新一下，路由还保留着，但是menu-item的高亮效果却到了默认的那一项上，就很无语,下面是我改良过的，思路嘛，就是把el-menu的default-active这个属性不给它常量，给它一个变量，这个变量在onmouted生命周期中拿到路由对象的path即可在刷新后保持高亮状态。
修改elementui 默认的菜单样式
wodecc_u的博客
12-01 3327
vue + elementui 项目中，快速修改自带的导航样式，方便开发
修改el-submenu__title及el-menu-item悬浮和点击样式
qq_37344867的博客
09-28 2634
修改el-submenu__title及el-menu-item悬浮和点击样式
Vue 重置 Element UI 组件默认样式
菜鸟记录
09-23 850
⏹Vue 重置 Element UI 组件默认样式
element导航栏修改悬停及选中样式
热门推荐
weixin_48111439的博客
11-27 1万+
Element -导航栏修改悬停及选中样式 element导航栏修改悬停及选中样式 **修改导航栏样式时el-menu-item和el-submenu有区别 el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用 原效果 el-menu-item部分 <style lang="less" scoped> .el-menu-demo { height: 92px; font-weight: bold; } //设置了行高和字体大小、高
完美解决menu划入样式
2301_78698859的博客
06-16 216
outline: 0!important;important;important;important;color: red;
elementui组件中取消el-menu的选中状态
weixin_43822237的博客
04-19 7972
链接：https://www.jianshu.com/p/c2b6a6152ce9 // 折叠当前展开的菜单栏。 this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]) // 取消菜单栏的当前选中状态。 this.$refs.elMenu.activeIndex = null 我的开发中有个需求是当前el-menu-item选中打开路由页面时是选中状态，在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的
vue中去除elementui组件自带的样式
L_WalkingPig的博客
09-25 8551
以el-card卡片组件为例： 总有个样式：padding:'20px'; 切样式来自于el-card__body的类名。 解决：在引用该组件的页面中重写即可 <style lang="scss" scoped> /deep/ .el-card__body{ padding: 0px 0px 10px 10px; } </style> ...
一个简约的element-ui的登陆页面
09-10
### 回答1： 好的，这是一个简单的 element-ui 登录页面的示例： ``` <template> <div class="login-container"> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } } }, methods: { handleLogin() { this.$refs.form.validate((valid) => { if (valid) { // 发送登录请求 // ... } else { console.log('表单验证失败') } }) } } } </script> <style> .login-container { width: 400px; margin: 100px auto; } </style> ``` 这个示例使用了 element-ui 的表单组件 `el-form`，表单项组件 `el-form-item`，输入框组件 `el-input` 和按钮组件 `el-button`。它还使用了表单校验功能，在用户点击登录按钮时会对表单进行验证，如果验证通过则发送登录请求，否则会在控制台输出一条 ### 回答2： 一个简约的element-ui的登陆页面是一个具有简洁设计，功能齐全的用户登陆界面。该页面使用element-ui的组件和样式，提供了用户输入用户名和密码进行登陆的功能。下面是页面的主要特点： 1. 页面布局简洁：登陆页面采用简约的设计风格，通过精心选择的颜色和排版，让用户界面看起来清爽且专业。 2. 响应式设计：该页面会根据用户设备的不同自动调整布局，确保在各种屏幕尺寸下都能提供良好的用户体验。 3. 友好的表单验证：输入框会实时检查用户的输入，并提供相应的错误信息，帮助用户避免常见的输入错误。 4. 忘记密码功能：在登陆表单下方提供了忘记密码的链接，点击后会跳转到密码重置页面，让用户便捷地找回密码。 5. 社交媒体登陆：登陆页面提供了使用社交媒体账号（如微信、QQ等）快速登陆的选项，让用户无需记住繁琐的用户名密码即可登陆。 6. 登陆按钮状态反馈：在用户输入了有效的用户名和密码后，登陆按钮会变成可点击状态，点击后会校验用户信息并进行相应的登陆操作。 7. 用户注册链接：在登陆框下方提供了用户注册的链接，点击后用户可以跳转到注册页面进行新用户的注册。 总之，一个简约的element-ui的登陆页面通过清晰的布局、良好的用户体验和功能齐全的特点，为用户提供了方便快捷的登陆界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值