ElementUI如何修改el-cascader的默认样式

 更新时间:2023年12月21日 09:23:24   作者:anqiaoyun  
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下

ElementUI如何修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的,所以修改样式时,必须要定义全局样式才能实现样式覆盖,那怎样才能避免全局的样式污染呢?

解决办法:通过给组件添加自定义的 popper-class 属性来避免全局样式污染;

<el-cascader
    v-model="showOptions"
    style="height: 36px;width:260px"
    placeholder="显示选项"
    :options="optionsList"
    :props="props"
    collapse-tags
    clearable
    popper-class="dropDownPanel"
></el-cascader>

在这里插入图片描述

下拉框的样式设置:

<style>
.dropDownPanel{
    background: #123493;
    border: 1px solid rgba(57,106,254,1);
}
.dropDownPanel[x-placement^=bottom] .popper__arrow {
    display: none;
}
.dropDownPanel .el-cascader-menu {
    color: #fff;
    border-right: 1px solid rgba(57,106,254,1);
}
.dropDownPanel .el-cascader-node.in-active-path {
    color: #38B4C1;
    /* background: transparent; */
}
.dropDownPanel .el-cascader-node.is-active {
    color: #38B4C1;
}
.dropDownPanel .el-cascader-node:not(.is-disabled):focus, 
.dropDownPanel .el-cascader-node:not(.is-disabled):hover {
    background-color: #0C0F56!important;
}
</style>

样式修改

<style scoped>
/deep/ .el-tag.el-tag--info {
    background-color: #123493;
    border-color: rgba(57,106,254,1);
    color: #FFFFFF;
}
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {
    border-color: rgba(57,106,254,1);
}
</style>

补充:

ElementUI 修改默认样式的几种办法

ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于vue 框架介绍几种修改 ElementUI 默认样式的办法。

面试官会问:怎样修改ElementUI的默认样式 ?
如何修改ElementUI样式?
回答:一共有三种方法:
1、内嵌法修改样式、通过:style修改,用于局部组件块
2、:class引用修改样式,通过:class修改,用于局部组件块
3、import导入修改样式
通过import导入样式文件,若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件
deep 穿透

一、内嵌法修改样式

通过:style修改,用于局部组件块

<el-button :style="selfstyle">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfstyle: {
					color: "white",
					marginTop: "10px",
					width: "100px",
					backgroundColor: "cadetblue"
				}
			};
		}
	}
</script>

二、:class引用修改样式

通过:class修改,用于局部组件块

<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfbutton: "self-button"
			};
		}
	}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	.self-button {
		color: white;
		margin-top: 10px;
		width: 100px;
		background-Color: cadetblue;
	}
</style>

三、import导入修改样式

通过import导入样式文件,若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件

<el-button>和下面的el-button效果一样</el-button>
<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
	import './button.css'
	export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped></style>
/* button.css */ 
.el-button {
	color: white;
	margin-top: 10px;
	width: 100px;
	background-Color: cadetblue;
}
.self-button {
	color: white;
	margin-top: 10px;
	width: 100px;
	background-Color: cadetblue;
}
.self-button:hover {
	color: black;
	background-Color: whitesmoke;
}
</style>

以上就是我针对vue框架下的ElementUI 修改默认样式的方法

到此这篇关于ElementUI如何修改el-cascader的默认样式的文章就介绍到这了,更多相关ElementUI修改el-cascader默认样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue混入mixin使用特点

    vue混入mixin使用特点

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-12-12
  • 详解vuex持久化插件解决浏览器刷新数据消失问题

    详解vuex持久化插件解决浏览器刷新数据消失问题

    这篇文章主要介绍了详解vuex持久化插件解决浏览器刷新数据消失问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 实例讲解vue源码架构

    实例讲解vue源码架构

    在本篇文章中小编给大家分享了关于vue源码架构的相关知识点内容,有需要的朋友们学习下。
    2019-01-01
  • Vue项目使用px2rem方法示例详解

    Vue项目使用px2rem方法示例详解

    这篇文章主要为大家介绍了Vue项目使用px2rem的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue 为什么要封装全局组件引入

    vue 为什么要封装全局组件引入

    这篇文章主要介绍了vue为什么要封装全局组件引入,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-07-07
  • vue移动端项目缓存问题实践记录

    vue移动端项目缓存问题实践记录

    最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,分享到脚本之家平台,对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • Vue3实现简约型侧边栏的示例代码

    Vue3实现简约型侧边栏的示例代码

    本文主要介绍了Vue3实现简约型侧边栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue3组合式API实现todo列表效果

    vue3组合式API实现todo列表效果

    这篇文章主要介绍了vue3组合式API实现todo列表,下面用组合式 API的写法,实现一个可新增、删除的todo列表效果,需要的朋友可以参考下
    2024-08-08
  • 解决Vue 刷新页面导航显示高亮位置不对问题

    解决Vue 刷新页面导航显示高亮位置不对问题

    这篇文章主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论