Vue3中使用Ant Design Vue组件库中modal,如何改变其样式?

1.使用Modal下的API getContainer 来获取 指定 Modal 挂载的 HTML 节点,同时css中使用深度选择器:deep

参数 说明 类型 默认值
getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement
() => document.body

2.完整代码

<template>
 <div class="modal-wrapper" ref="modal">
            <a-modal
              v-model:visible="addRuleModal"
              title="新建互动"
              centered
              okText="保存"
              cancelText="取消"
              :getContainer="() => $refs.modal"
              @ok="onFinish(state.formState, state.dataRule)"
              @cancel="resetForm"
            >
            <div class="content">
<span>
Hello World!
</span>
</div>
            </a-modal>
          </div>
</template>
<style lang="less" scoped>
  :deep(.modal-wrapper) {
      .content{
        color: #1f1f1f;
      }
    }
</style>

相关推荐

  1. vue.js如何使用动态

    2024-07-15 22:28:03       51 阅读
  2. Vue的v-model(深入解析)

    2024-07-15 22:28:03       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 22:28:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 22:28:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 22:28:03       58 阅读
  4. Python语言-面向对象

    2024-07-15 22:28:03       69 阅读

热门阅读

  1. 写在2024美洲杯之后

    2024-07-15 22:28:03       20 阅读
  2. AI艺术革命:使用神经网络生成创新艺术作品

    2024-07-15 22:28:03       18 阅读
  3. JUC练习——线程安全的计数器

    2024-07-15 22:28:03       19 阅读
  4. vue3~

    vue3~

    2024-07-15 22:28:03      18 阅读
  5. QSqlQuery::value: not positioned on a valid record

    2024-07-15 22:28:03       22 阅读
  6. 基于金碟云星空实现硬件ECN校验

    2024-07-15 22:28:03       18 阅读
  7. ObjectiveC 内存管理

    2024-07-15 22:28:03       21 阅读
  8. 7.15作业

    2024-07-15 22:28:03       23 阅读
  9. 【C++】继承与多态相关11道面试题整理

    2024-07-15 22:28:03       20 阅读
  10. .NET Core项目中添加MIME类型

    2024-07-15 22:28:03       21 阅读
  11. 对于RBAC模型的认识

    2024-07-15 22:28:03       20 阅读
  12. 开源项目面临的机遇与挑战

    2024-07-15 22:28:03       19 阅读