Elemen的卡片el-card使用

码农小趴菜

已于 2024-02-05 14:39:38 修改

阅读量3.4k

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-02-05 14:20:45 首次发布

本文链接：https://blog.youkuaiyun.com/2301_77337099/article/details/136041084

版权

本文详细介绍了如何使用el-card组件的默认插槽结构和具名插槽实现自定义头部，以及如何调整组件样式，特别关注了scoped样式的作用域问题和解决方法，包括使用深度选择器::v-deep来确保样式仅限于当前组件内部应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-card可以当做盒子使用

一、默认的插槽结构提供主体内容

具名插槽结构提供头部结构

        <el-card>
            <!-- <h3 slot="header">标题</h3> -->
            <template #header>
                <h3>标题</h3>
            </template>
            盒子
        </el-card>

二、

调整组件样式

1. 加类名这个类名加组件根元素

<style >
.box{
width:420px;
margin:0 auto
}
</style>

2. 直接利用组件名当成类名组件库的规范组件的根元素一定有一个和组件名相同的类名

<style >
.el-card{
width:420px;
margin:0 auto
}
</style>

样式不生效如图背景颜色没有

<style lang="scss"  scoped>
.el-card{
width:420px;
margin:0 auto;
 .el-card__header{
    background-color:aqua;
    text-align:center;
    color:#fff
}
}
</style>

解决方案

scoped 希望样式只作用于当前组件内的结构
如果是组件内使用了其它组件那么其它组件结构scoped不负责
解决方案：深度选择器继续向下渗透影响组件内的结构在选择器钱加 ::v-deep
scss ::v-deep
less /deep/
css >>>


<style lang="scss" scoped >
.el-card{
width:420px;
margin:0 auto;
::v-deep .el-card__header{
    background-color:aqua;
    text-align:center;
    color:#fff
}
}
</style>