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样式修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 判断元素内容是否超过宽度的方式

    vue 判断元素内容是否超过宽度的方式

    这篇文章主要介绍了vue 判断元素内容是否超过宽度的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue项目中使用jsonp抓取跨域数据的方法

    Vue项目中使用jsonp抓取跨域数据的方法

    这篇文章主要介绍了Vue项目中使用jsonp抓取跨域数据的方法,本文通过实例代码讲解的非常详细,需要的朋友可以参考下
    2019-11-11
  • 在Vue3中使用event bus(事件总线)的步骤详解

    在Vue3中使用event bus(事件总线)的步骤详解

    在Vue 3中,可以通过创建一个事件总线(event bus)来实现组件之间的通信,要在Vue 3中使用事件总线,主要步骤有:1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线,以下是详细的步骤和示例,需要的朋友可以参考下
    2025-01-01
  • 使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决

    使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决

    这篇文章主要介绍了使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 基于Vue2.X的路由和钩子函数详解

    基于Vue2.X的路由和钩子函数详解

    下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue3指令之搜索框输入防抖功能实现

    Vue3指令之搜索框输入防抖功能实现

    在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue鼠标点击事件和键盘事件举例详解

    Vue鼠标点击事件和键盘事件举例详解

    在Vue框架中我们经常需要绑定各种JS事件,如"点击事件"、"鼠标移动事件"、"键盘事件"等等,这篇文章主要给大家介绍了关于Vue鼠标点击事件和键盘事件的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue中的自定义分页插件组件的示例

    vue中的自定义分页插件组件的示例

    这篇文章主要介绍了vue中的自定义分页插件组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • nuxt.js框架使用小结

    nuxt.js框架使用小结

    本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • Element plus中el-input框回车触发页面刷新问题以及解决办法

    Element plus中el-input框回车触发页面刷新问题以及解决办法

    在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下
    2024-03-03

最新评论