【前端】修改acro element UI等封装元素的样式、字体

<div class="address"><div class="word" :title="account">{{ format(account) }}</div><div class="icon" @click="copyAddress(account)"
</div>

这种div的样式好修改，只需要

.address.word{//需要的字体样式
}

但是在修改框架封装好的UI元素时，变得棘手起来，比如，

<a-tabs default-active-key="1"><a-tab-pane key="1" :title="t('profile.myDomain')">....

你要修改

修改为制订figma设计稿的字体样式。

这就要用到具有穿透特性的“css深度选择器”
1、如果用的是原生的css样式，可以直接使用>>>

.detail >>> .arco-tabs-tab-title{//需要的字体样式
}

2、如果用了预处理器scss，可以使用::v-deep或者/deep/，更推荐使用前者，一是兼容性更好，二是加载速度更快。

.detail {margin-top: 54px;::v-deep .arco-tabs-tab-title {font-family: 'PingFang SC';font-style: normal;font-weight: 400;font-size: 24px;color: #ADADAD;}
}

效果如图：

年前遇到的问题，这几天没事了想想了，今天忽然灵光咋现为何不把UI当做普通标签来处理哈哈
欧耶~~ 这个年过的太香了（事实证明，劳逸结合太重要了。前一阵子白天干国企，中午不午休，晚上回来再干私活真是累够呛~）

【前端】修改acro element UI等封装元素的样式、字体相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
element ui 菜单封装_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
优化element ui中的弹框样式
element ui 虽然提高了开发效率,但是坑也不少,比如弹框的体验就不佳: 弹框体验不佳自带的弹框样式有很多缺点,比如不居中,大小会超出屏幕然后在最右侧出现滚动条,看不到footer里的按钮等. ...

【前端】修改acro element UI等封装元素的样式、字体

【前端】修改acro element UI等封装元素的样式、字体相关推荐

最新文章

热门文章