就基于ant design vue 库modal组件封装，引出的css穿透问题总结

今天在用到ant-design-vue库中的modal组件的时候，因为开发的整个模块需要用到modal组建的地方比较多，就想着在此基础上封装一个更加灵活多用的modal组件，当时有以下两个需求。

1、支持单个按钮可配置，内容部分可配置。
2、让蒙层组件支持宽度设置，并且溢出滚动显示（目的是为了让蒙层在一屏展示，提升用户体验）；

先聊聊第一个问题，源组件是用:footer="null"来控制底部按钮来控制，但是实现不了单个按钮的可配置，因此这里需要用到插槽来覆盖掉源组件的默认按钮和事件，然后通过props属性进行控制。当然内容可配置也是运用插槽实现。

<template slot="footer">
    <a-button type="default" @click="handleCancel">取消</a-button>
    <!  isShowFooterBtn 该值控制确定按钮是否显示 ---->
    <a-button v-if="isShowFooterBtn" type="primary" @click="handleOk">确认</a-button>
</template>

第二个需求，实现其实有很多方法，查阅一翻资料后要用的css穿透，当时觉得这个词好陌生。下面列举三个：
1、利用源组件提供的bodyStyle属性进行添加样式：

:bodyStyle="{
    maxHeight: heightValue + 'px',
    overflowY: 'auto' 
}"

2、将<style></style>标签的scoped属性去掉，然后直接给.ant-modal-body类添加相应样式，这种只适用代码量比较少，自己可控，确保不会污染其他组件的情况下使用。

.ant-modal-body {
    max-height: 650px;
    overflow-y: auto;
}

3、利用css穿透。

什么场景下用到css穿透

1.在创建vue文件的时候，为了防止各组件之前造成样式污染<style></style>标签会默认添加scoped属性，从而使得该样式只作用于当前组件也就是当前域。但是这样也会造成一些样式作用不了，但是scoped又不能去掉。这个时候就会用到css穿透。
2.引入第三方组件库（如element-ui、element-plus、ant-design-vue等），修改第三方组件库的样式。

css穿透的三种书写方式

1. >>> 适用stylus和less

外层容器 >>> 组件 {}

2. /deep/ 适用less

外层容器 /deep/ 组件 { }

 

3. ::v-deep通用

<!以伪元素的形式---->

外层容器 ::v-deep 组件 {}   // 这种方式css代码经过postcss编译后会将当前域的标识放到外层容器后面。


外层容器 {
    组件{
    ::v-deep {}    // 这种方式css代码经过postcss编译后会将当前域的标识提到外层容器后面
    }
} 

具体内容参考这篇文章：https://juejin.cn/post/6982780540919234573

综上：就第二个问题，在源组件中是怎么运用css穿透的呢

<style lang="less" scoped>
    /deep/ .ant-modal-body {
        max-height: 650px;
        overflow-y: auto;
    }
</style>

以上三种方法都能实现该需求，如果还有其他方法，欢迎大家留言探讨。