Vue项目解决自定义el-dialog的border-radius无效的问题

news/2024/11/17 12:55:00/
一、问题产生的原因
 

  自定义el-dialog的border-radius无效的原因其实就是因为层级的问题,

f12打开样式检查就能发现组件自身已经全局定义了一个圆角变量

二、解决方法
 

和上面一样,在项目全局也就是在app.vue中定义全局变量 并且需要给!important,不加!important是无效的,要不然覆盖不了原有的.

<style lang="scss" scoped>
.el-dialog {border-radius: var(--el-border-radius-small);
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
javascript"><template><RouterView></RouterView>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<style lang="scss">@import './global.scss';
</style>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

.global.scss

:root {--el-border-radius-small: 10px !important;
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

改别的其实也一样,在全局定义就行,总之就是要覆盖掉原有的。其实不在全局加也行,把scoped去掉就行(但是这个不推荐!!!)  亲测有用!!!!!


三、效果如下:

http://www.ppmy.cn/news/1451212.html

相关文章

React 之 Effect与事件(event)(八)

Effect&#xff08;useEffect Hook&#xff09; 在React中&#xff0c;Effect&#xff08;或者更具体地说&#xff0c;useEffect Hook&#xff09;是一个特殊的函数&#xff0c;它允许你在函数组件中执行副作用操作。这些副作用操作可能包括数据获取、手动更改DOM、订阅或取消订…

【leetcode】二分搜索题目总结

704. 二分查找 class Solution { public:int search(vector<int>& nums, int target) {int left = 0, right = nums.size() - 1;while (left <= right) {int mid = left + (right - left) / 2;if (nums[mid] == target) {return mid;} else if (nums[mid] < t…

2024.4.25 LoadRunner 测试工具详解 —— Controller Analysis

目录 Controller 的使用 创建场景 Controller 快捷方式创建场景 VUG 针对写好脚本创建场景 场景设计 设计初始化 设计启动机制 设计性能测试脚本的执行时间 设计虚拟用户退出机制 场景运行 添加监控指标至图标格区域 Analysis 的使用 汇总报告 测试报表 吞吐量图 …

利用大模型提升个性化推荐的异构知识融合方法

在推荐系统中&#xff0c;分析和挖掘用户行为是至关重要的&#xff0c;尤其是在美团外卖这样的平台上&#xff0c;用户行为表现出多样性&#xff0c;包括不同的行为主体&#xff08;如商家和产品&#xff09;、内容&#xff08;如曝光、点击和订单&#xff09;和场景&#xff0…

GraphQL在前端开发中的实践与性能优化:超越RESTful API

GraphQL作为一种新型的API查询语言&#xff0c;以其灵活的查询能力和高效的资源获取机制&#xff0c;在前端开发中扮演了重要角色。相较于传统的RESTful API&#xff0c;GraphQL允许客户端指定所需的数据结构&#xff0c;从而避免了过载和不足的问题&#xff0c;提高了数据传输…

Python爬取豆瓣电影Top250数据

任务 爬取豆瓣电影top250中的影片名称、影片海报、年份、地区、类型、评分、评价人数、总体评价&#xff0c;并输出到douban_top250.xlsx文件中 环境 Python 3.8 requests bs4 openpyxl 源码 # 创建一个新的Excel工作簿 workbook openpyxl.Workbook() # 获取默认的工作表…

k8s crd inferenceservices.serving.kserve.io

背景 ArgoCD无法连接到k8s集群 日志如下&#xff1a; Failed to load live state: failed to get cluster info for "https://kubernetes.default.svc": error synchronizing cache state : failed to sync cluster https://10.233.0.1:443: failed to load initia…

生成能够精确匹配原字符串的正则表达式

正则表达式匹配字符串 简介具体方案生成正则表达式的代码实现 简介 需求内容&#xff1a;需要将不同的公司名称归一化 比如namecheap, NAMECHEAP. INC. 等表示同一含义&#xff0c;但是表现形式不同 本文使用java语言实现了由一串字符串自动生成精确匹配的正则表达式的方式&am…