vue3 elementPlus部分组件样式修改的方法

 更新时间:2024年01月24日 11:18:02   作者:小沐°  
这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

前提:在less语言下使用/deep/;在sass语言下使用 ::v-deep 替换 /deep/

 el-dropdown

//下拉框中文字颜色
::v-deep .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: #f5f5f5;
  color: #A88D5B;
}
//去除下拉框边框
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

el-input

//改变输入框选中时边框颜色
.el-input {
  --el-input-focus-border-color: #88733c;
}

el-tabs

//标签页选中时文字颜色
::v-deep .el-tabs__item.is-active {
  color: #a88d5b !important;
}
//标签页鼠标悬浮时文字颜色
::v-deep .el-tabs__item:hover {
  color: #a88d5b !important; //悬浮
}

到此这篇关于vue3-elementPlus部分组件样式修改的文章就介绍到这了,更多相关vue3-elementPlus样式修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2.0 keep-alive最佳实践

    vue2.0 keep-alive最佳实践

    这篇文章主要为大家详细介绍了vue2.0 keep-alive的最佳实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    这篇文章主要介绍了Vue 使用iframe引用html页面实现vue和html页面方法的调用操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • element-ui 上传图片后清空图片显示的实例

    element-ui 上传图片后清空图片显示的实例

    今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • ElementUI 修改默认样式的几种办法(小结)

    ElementUI 修改默认样式的几种办法(小结)

    这篇文章主要介绍了ElementUI 修改默认样式的几种办法(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 解决v-model双向绑定失效的问题

    解决v-model双向绑定失效的问题

    这篇文章主要介绍了解决v-model双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue中import from的来源及省略后缀与加载文件夹问题

    这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 深入解析vue中的权限管理

    深入解析vue中的权限管理

    权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源,这篇文章主要介绍了vue的权限管理的相关知识,需要的朋友可以参考下
    2022-06-06
  • vue组件横向树实现代码

    vue组件横向树实现代码

    这篇文章主要介绍了vue组件横向树实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue-router路由跳转问题 replace

    vue-router路由跳转问题 replace

    这篇文章主要介绍了vue-router路由跳转问题 replace,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目安装scss常见报错处理方式

    vue项目安装scss常见报错处理方式

    这篇文章主要介绍了vue项目安装scss常见报错处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论