【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

这篇具有很好参考价值的文章主要介绍了【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、CSS声明全局变量

二、使用el plus 和 el ui的自带样式

1、element plus—— var.scss位置

2、element ui—— var.scss位置

三、修改el plus 和 el ui中的自定义样式变量(方法一致)


本萌新最近在写网页时使用到了element plus中自带的CSS全局样式定义,本文将从CSS声明全局变量的方法出发,记录如何使用并自定义修改element plus(vue3) 和 element ui(vue 2) 自带的样式。其中也包含了一些对SCSS语言的初探。请各位多多指教~

一、CSS声明全局变量

当我们在写CSS时,会遇到反复定义某些元素的同一属性的同一属性值,代码重复高,并且若是要统一修改该属性值也会显得繁琐。因此,我们CSS中也提供了方法,让我们可以像其他语言类型一样,将值统一储存在某一变量中再调用。

那么这里就要介绍 :root  和  var() 两大“金刚”了。这是最为基础和常用的组合。

  1. :root 以伪类的形式,匹配了文档树中的根元素,通俗理解 :root 就对应 HTML元素 ,但会比HTML元素选择器优先级更高。不难理解HTML作为我们其他元素的“爸爸”,所有CSS全局变量就应该声明在:root里面。
  2. var()函数的含义,就是取得自定义属性中的值,插入到我们写的样式表对应的属性中。

举个栗子吧~

:root{
    --button-color:#fff;
    --div-margin-left:10px;
}

div{
    margin-left:var(--div-margin-left);
}

button{
    background-color:var(--button-color);
}

*注意:自定义属性变量声明时应以 -- (双短横线)开头,作为与其他属性名称的区分,符合CSS规范

二、使用el plus 和 el ui的自带样式

 那么对于element 库中现成的一些变量我们如何使用呢?以颜色为例使用为例~

首先我们需要找到element plus 和 element ui定义全局变量的文件在哪里,以便于使用查阅和自定义修改。

1、element plus—— var.scss位置

\node_modules\element-plus\theme-chalk\src\common 文件夹下

element中自定义样式变量,Web学习笔记,css,vue.js,前端

2、element ui—— var.scss位置

\node_modules\element-ui\packages\theme-chalk\src\common  文件夹下

element中自定义样式变量,Web学习笔记,css,vue.js,前端

接下来以element plus为例简要看看var.scss怎么定义的:

截取了文件中关于color部分的定义,如下图:

element中自定义样式变量,Web学习笔记,css,vue.js,前端

  • !default代表变量默认值
  • map.deep-merge($map1,$map2) ,将两个变量声明的属性和属性值合并在一起,此处即将$type中定义的各个状态(success、warning 等等)对应的颜色值map和原生color的map合并起来
  • 紧接着在color的基础上定义具体的color样式,就有了$color-white  $color-primary等等
  • map.get($map,key)方法用于像对象一样,根据键值获得map中对应的属性值。上图就是用'white'  'black'  这种键值获取到前面$colors中'white'  'black'所对应的颜色值。

了解到其如何定义之后,我们就将已经定义好的用于自己的样式中吧~

我们在main.js中全局引入element-plus(方法不赘述),再在自己的vue界面中引入,引入格式如下:

//随便写的例子,重点关注后面两行
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

*注意:我们找到对应的变量名例如$color-primary,但是在vue中使用需要加上 --el-  ,即最终为--el-color-primary才会生效

三、修改el plus 和 el ui中的自定义样式变量(方法一致)

官网教程如下:

element-plus:主题 | Element Plus (element-plus.org)

element-ui:组件 | Element

总结起来就是三步走:

  • 在assets(静态资源)目录下创建自定义的element-variables.scss文件,并且在main.js引入

element中自定义样式变量,Web学习笔记,css,vue.js,前端

  • 按照第二大点中所介绍的路径找到var.scss位置,查看库里定义了哪些变量、哪些可以修改、代码如何等等,在原变量基础上修改内容。
  • 然后,在自定义scss文件中先导入原本的var.scss代码,使用语句为:

element中自定义样式变量,Web学习笔记,css,vue.js,前端

 在该行代码上方,写入自己定义、修改的变量内容!!!

 

希望对你有帮助~~~文章来源地址https://www.toymoban.com/news/detail-815537.html

到了这里,关于【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -全局异常统一处理实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年02月03日
    浏览(42)
  • vue3+vite+element-plus创建项目,修改主题色

    根据官方文档安装依赖 vite.config.js配置 新建一个文修改全局样式的文件 在src下新建styles/element/index.scss文件,内容如下: @forward \\\'element-plus/theme-chalk/src/common/var.scss\\\' with (     $colors: (         \\\'primary\\\': (             //主色             \\\'base\\\':green         )         //修改其他

    2024年02月10日
    浏览(54)
  • 若依(ruoyi)前端Vue3 Element Plus Vite版样式修改

    位置: src/layout/components/Navbar.vue 类名: .navbar 这里主要是修改导航栏的背景色,在修改颜色值时,你可以使用其他十六进制颜色代码,也可以尝试使用RGB、RGBA或HSL等其他表示颜色的方式。这取决于你的设计需求和个人喜好。 这段主要是修改右侧的图标,隐藏、全屏等方法:

    2024年02月03日
    浏览(69)
  • 使用::v-deep修改element组件自带样式 不生效【已解决】

    发现这样写 表格并没有去掉背景色 最后发现使用 ::v-deep 如果前面有其他类名 一定要有空格 !!!

    2024年02月12日
    浏览(37)
  • 解决Module not found: Error: ‘element-plus/lib/theme-chalk/index.css‘,通过下载插件,使用的是vue ui项目仪表盘

    1.首先在package.json中查看vue版本和element-ui版本 2.找到element-ui官网https://element.eleme.cn/#/zh-CN/component/quickstart,点击element-ui 3.进入到element–ui组件下载的地址 4.下载插件 vue-cli-plugin-element git clone https://github.com/ElementUI/vue-cli-plugin-element.git 5.根据README 没有项目就创建项目 vue create

    2024年02月13日
    浏览(47)
  • 教程6 Vue3+Element Plus el-carousel制作轮播图(后面有修改样式的方法)

    (1)引入Element开发环境 (2)自动引入Element (3)在配置文件中进行配置,本人使用的是Vit构建工具 如果使用Vite作为构建工具,配置文件为vite.config.js,配置方法如下: (4)Element Plus全局引入 main.ts中增加下面的代码: (1)运行效果 (2)Rotation.vue参考代码 (3)卡片式轮

    2024年02月06日
    浏览(48)
  • 在vue ui 中下载的element插件如何卸载并安装element-plus

    通过cmd打开vue ui并自定义创建项目中,引入了vue-cli-plugin-element插件,此时项目是vue cli3 的,与此版本有冲突,应该要下载vue-cli-plugin-element插件,如何卸载呢? 安装的错误版本插件:vue2安装element-ui版本,vue3需要安装element-plus版本 应该要装的element插件:  此时通过在终端

    2024年02月11日
    浏览(69)
  • Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库,如何发布到npm并使用(支持全局或按需引入使用),超详细

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(82)
  • 【Vue】Element Plus和Element UI中插槽使用

    今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Element Plus组件库,表格组件中插槽一般为#default,下面就来讲一下这两个。 Element Plus 和 Element UI 都是基于

    2024年02月12日
    浏览(41)
  • [element plus] 分页组件使用 - vue

    学习关键语句: 饿了么加组件分页组件 element+分页组件 vue3 + 饿了么分页组件 必须要说明的是 , 这篇文章使用的分页组件样式包含了饿了么官方给出警告以后会弃用的部分 但是问题是什么呢? 问题就是我还没找到这个用 vmodel 绑定的使用方法 , 再加上现在也算是有点小忙 , 暂时

    2024年02月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包