vue3实现el-card的body的样式穿透

最新推荐文章于 2024-08-13 15:59:30 发布
最新推荐文章于 2024-08-13 15:59:30 发布
阅读量750 收藏
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frank_colo/article/details/133886221
版权
本文详细解析了如何在Vue3中穿透`el-card`组件的默认样式，重点讲解了如何修改`<el-card>.el-card__body`的padding值，使之上下左右均为20px，以满足特定设计需求。
摘要由CSDN通过智能技术生成 
:deep(.el-card .el-card__body){
    padding-top:20px!important;
}

改el-card的body

将内容的padding变成上下左右都是20px

el-card默认是上面为15px,其他左右下都是20px 

详解源码vue3的样式穿透scope-CSDN博客

烟火的降落
关注
ElementUI大小改变
huiguo_的博客
04-25 2952
一定要有 /deep/ ~~~ /deep/ .el-upload--picture-card{ width: 100px; height: 100px; } /deep/ .el-upload{ width: 100px; height: 100px; ...
踩坑:Element-UI中el-card里的:body-style
peijian0317的博客
10-29 2226
4.得出结论display:flex必须写在element-ui所规定的body-style里而且body-style前要加:因为里面如果不加的话他就不是js解析式里面的东西会被当成字符串看待,只有加上:里面才会被当成js解析式。初学Vue练习写项目时发现有些css样式只能放body-style里,这是由于 CSS 的特殊性和优先级规则导致的。1.body-style的默认样式是自带padding:20px,常用于el-card中。2.我想实现如图红色框的左右布局最好的方法就是用display:flex。
修改el-card组件内边距
最新发布
I am the light coursing in the soul of the moon.
08-13 238
修改el-card的内边距
vue学习笔记 修改el-card样式
热门推荐
xjcwzp的专栏
09-13 3万+
<template> <div style="margin: 50px"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>卡片名称</span> <el-button class="button" type="text">操作
修改el-card中header或body样式或自定义图片样式
qq_50276105的博客
10-14 9135
【代码】修改el-card中header或body样式。
正确运用.el-card__body 类， 记录 el-card 坑点
小蒟蒻的博客
03-01 2006
el-card 内 echart不显示，.el-card__body类 设置，el-card 内边距
关于对ElementUI中el-card里的:body-style=“{ padding: ‘10px‘ }“以及el-card组件中的header和body的困惑点
m0_49662897的博客
12-30 1万+
关于对ElementUI中el-card里的:body-style="{ padding: '10px' }"以及el-card组件中的header和body的困惑点
vue修改Element的el-table样式的4种方法
10-14
除了上述方法，还可以通过CSS类和深度选择器（如`.el-table__body tr:nth-child(n)`)来全局修改Element UI的el-table样式。但这种方法可能会受到Element UI内部样式的影响，可能需要更高的优先级或者使用`!important...
vue3 + el-dialog
weixin_39568072的博客
06-21 3143
vue3 + el-dialog
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8247
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
【Vue3】文章分类页面 - [el-card卡片]
qq_39921135的博客
06-17 654
由于各个模块都会有头部和下面的内容部分，所以将其封装成小的组件，运用到插槽。pageContainer：页面容器。具名插槽提供头部，默认插槽提供内容。
【VUE3】ElementUI--el-card卡片列表、el-tree 结合多选框获取子节点id导出数据
qq_48468636的博客
04-23 6558
在父级选中后我们不需要父级的id，只要求子级已选中的id，当子级全部勾选后父级也执行勾选，此时也要把父级id去掉。1.通过 npm、yarn、pnpm 安装。这次比较简单直接，贴上代码就可以了！首先要在项目文件安装具体可以查看。
el-card的头部样式在scoped下作用无效可添加/deep/或者>>>
qq_33241251的博客
11-13 8204
添加scoped情况下改变el-card的header和body样式无效 <style scoped> .el-card .el-card__body { padding: 6px; } .el-card .el-card__header { padding: 8px 20px; border-bottom: 1px solid #EBEEF5; ...
element-ui_el-card-卡片
gaogzhen的博客
08-18 1万+
element-ui_el-card-卡片 目录 文章目录1、简介2、使用2.1、常用属性2.2、效果图源码***后记*** ： 内容 1、简介 一种卡片容器。 应用场景：用于立体，有层次感的容器 效果图1-1： 2、使用 2.1、常用属性 el-card 属性名 类型 可接受值 默认 描述 header string - - 字符串标题或者slot#header插槽自定义 body-style object - {padding: ‘20px’} card主体的css
el-card 组件美
只想买把蝴蝶knife
04-03 3587
el-card 组件美化 最近在网上都没看到el-card组件的美化，自己也不是做前端的，就随便美化了一下组件，感觉还算不错，分享出来 代码: css: .el-card{ margin: 10px; border-radius: 20px border-color: #C0C4CC; } .el-card:hover{ margin-top: -10px; margin: 30px; } 效果图 ...
Vue Element Plus El-Card 组件
小楼一夜听春雨，深巷明朝卖杏花
02-29 7212
El-Card是Element Plus组件库中的一个组件，用于展示卡片式的内容。它提供了丰富的配置选项，可以根据需求自定义卡片的样式和内容。可以通过CDN引入，也可以通过下载并引入本地文件的方式。4.在``标签内部，可以添加任意内容来展示在卡片中，可以是文本、图像、按钮或其他HTML元素。（3）可以为`标签添加多个属性，来配置卡片的样式和行为。（2）在需要使用El-Card的地方，使用`标签包裹卡片内容。
Vue 关于el-card、el-table组件的一些设置
初心不改
03-16 1万+
1. el-card 高度自适应 <el-card class="el-card-define"> ... </el-card> <style> .el-card-define { min-height: 100%; height: 100%; } </style> 2. el-table-column即表格列内容超出设置变省略号 这样表格每行高度就不会被撑开显得很难看。此时鼠标悬停上去会显示全部内容，但不支持复制，需拖拽将此列拉宽至全部显示该列内容
vue3手写card组件
zzx262625的博客
11-17 250
在这篇文章中，我们将介绍如何使用Vue 3的Composition API来手写一个简单的Card组件。我们将展示该组件的模板、逻辑和样式，以便您了解如何使用Vue 3的最新语法糖来创建可复用的UI组件。
vue3 el-card body-style-style
07-27
在Vue 3中，可以使用`<el-card>`组件来创建一个卡片，然后使用`body-style`属性来设置卡片的样式。下面是一个示例： ```html <template> <el-card :body-style="cardStyle"> <div slot="header" class="card-header">Card Title</div> <div class="card-content"> <!-- Card content here --> </div> </el-card> </template> <script> export default { data() { return { cardStyle: { padding: '20px', backgroundColor: '#f7f7f7', border: '1px solid #eaeaea' } } } } </script> <style> .card-header { background-color: #f3f3f3; padding: 10px; } .card-content { margin-top: 10px; } </style> ``` 在上面的示例中，我们在`<el-card>`组件上绑定了`body-style`属性，并将其设置为一个对象`cardStyle`。在`cardStyle`对象中，我们可以设置卡片的样式，例如`padding`、`backgroundColor`和`border`等。你可以根据自己的需求进行设置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值