修改elementUi中上传图片默认样式不影响全局样式

最新推荐文章于 2024-01-19 20:17:41 发布
原创 最新推荐文章于 2024-01-19 20:17:41 发布 · 3.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

部署运行你感兴趣的模型镜像

开发项目中多次运用到element ui中upload上传图片组件，但是有一处需要将正方形的上传框变成圆形，于是找到需要修改的元素，发现已修改，其他地方也会修改，于是找到一个好方法，在需要修改的样式的父元素添加类名，然后要修改的类名前面加上父元素即可。
如图所示：
在这里插入图片描述
在这里插入图片描述
框起来的是要修改的元素，前面是其父元素

最终效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191207152125364.png
在这里插入图片描述

完美！！！！

您可能感兴趣的与本文相关的镜像

Qwen-Image

Qwen-Image

图片生成
Qwen

Qwen-Image是阿里云通义千问团队于2025年8月发布的亿参数图像生成基础模型，其最大亮点是强大的复杂文本渲染和精确图像编辑能力，能够生成包含多行、段落级中英文文本的高保真图像

ElementUI中使用富文本编辑器(quill-editor）实现图片视频上传，图片拖拽和缩放，以及菜单悬停显示中文和表情包
m0_61820867的博客
07-28 4668
介绍了ElementUI中使用富文本编辑器(quill-editor），优化有些功能（图片缩放，拖拽）视频上传回显以及菜单悬停显示中文以及表情包
Vue（二）：2.0与3.0的差异、vue.config.js、引入全局样式、router重定向、elementui依赖、git命令提交文件
Start_Simple的博客
03-09 1101
No Babel config file detecte报错处理、vue.config.js配置、全局默认样式、代码上传远端库
＜el-upload＞修改默认上传框的样式
weixin_43951592的博客
05-15 6784
Element官网的默认样式： 现在我们要把它改成这样： css代码： <style> .el-upload--picture-card { height: 120px !important; line-height:110px !important; } .el-icon-plus:before { content: "\A\E6D9\A上传图片" !important; font-size:20px !important;
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
qq_44367273的博客
11-08 4433
在微信小程序中用u-icon标签选择器才能对其设置样式，但在h5预览中u-icon{ }这样设置样式不生效，用组件的customStyle属性才生效。
element组件的样式修改问题
qq_44956105的博客
08-18 835
element组件样式修改
uni-app uview中u-upload自定义样式
Stitch_xiao的博客
12-23 4183
【代码】uni-app uview中u-upload自定义样式。
el-upload 设置默认图片
xiaoyue_ly的博客
09-23 1440
el-upload 设置默认图片
Vue-ElementUI上传组件优化：限制删除权限实现查看下载功能
本文标题“Vue-ElementUI上传功能优化[源码]”明确指出了核心目标：在使用 Vue 和 Element UI 技术栈的前提下，对 `el-upload` 组件进行功能层面的优化，使其能够根据当前页面状态动态调整用户可执行的操作。...
vue路由单页组件+ElementUI的使用更新.docx
10-04
在`main.js`中引入Element UI，并设置全局样式： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ ...
vue2项目 用的elementui 现在项目里有很多上传组件 现在需要将每一个上传组件加上提示信息 怎么统一价
最新发布
03-27
在Vue2项目中统一为ElementUI上传组件添加提示信息，可通过以下步骤实现全局管理： --- ### 一、最佳解决方案：封装全局组件 通过创建包裹`el-upload`的自定义组件，实现提示信息统一管理。 --- ### 二、具体...
uview上传图片修改图片u-upload
weixin_41970780的博客
11-18 1673
uview上传图片修改图片u-upload
Element中Upload组件上传（图片和文件的默认上传以及自定义上传）
weixin_41549971的博客
01-19 3821
Element中Upload组件上传（图片和文件的默认上传以及自定义上传）
uview自定义样式上传图片
sanhangzhongwen的博客
10-10 2258
uview自定义样式上传图片
element-ui的用户头像上传默认显示图片
岁末zzz的博客
01-23 8557
初始时为img获取一个图片
element UI修改组件的默认样式-转载
q1ngqingsky的博客
05-17 1837
element UI修改组件的默认样式，方法有三种： 新建global.css,并在main.js中引入import “./assets/style/global.css”; 在单个xx.vue文件最后多写一对标签，即有两对style标签，一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里：覆盖的样式不会生效！ 通过deep属性去控制,可以不用新建style标签,最方便 通过这三种方法，在文件中编写css去覆盖原来的样式，可以通过添加 ！important 修饰符提
vue中使用elementUI组件的Upload 上传图片
热门推荐
坤音女孩的博客
11-02 2万+
1.访问Element官网【组件–Upload上传】 &amp;amp;amp;amp;amp;amp;lt;el-upload action=&amp;amp;amp;amp;amp;quot;https://jsonplaceholder.typicode.com/posts/&amp;amp;amp;amp;amp;quot; list-type=&amp;amp;amp;amp;amp;quot;picture-card&amp;amp;amp;am
修改element-UI 的 el-upload样式
前端职场小白_炜晨科技的博客
09-08 4349
【代码】修改element-UI 的 el-upload样式。
vue实现文件上传样式修改
青春不打烊的博客
12-19 697
【代码】vue实现文件上传样式修改。
Upload 上传：图片上传
sunluyi的博客
11-08 7316
需要用到的API action：服务器上传地址 max-count：最大选择图片的数量 form-data：上传额外携带的参数 name：上传文件的字段名，供后端获取使用 第一种：选择图片后，直接上传 <template> <view class="index"> <u-upload :show-progress="false" :action="action" :form-data="formData" max-count="3" .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值