• 引用antd-vue中的modal组件样式只在当前vue组件生效的解决方案


      如题,前端开发当中,经常会团队多人合作开发,而为了避免页面样式覆盖,除了要遵守公司或团队制定的前端开发标准规范之外,一定要仔细阅读相关框架中所使用组件的API说明。我们开发时为防止页面样式影响其他人的页面,通常都会在.vue文件的style样式上加上scoped声明该样式的作用域,但是antd-vue中的modal组件默认是挂载到body上的,从而导致在xxx.vue文件中style中写的样式无法生效,仔细阅读antd-vue中的modal组件的API说明,如下:

    通过API说明可知,a-modal默认挂载在body下,所以我们可以通过getContainer来改变modal挂载的HTML节点,使其当前组件内的样式生效,具体方案如下:

    源代码如下:

    <template>
      <div ref="gismap">
        <a-modal
          ref="modal"
          :centered="centered"
          :visible="visible"
          :class="getClass(modalClass)"
          :style="getStyle(modalStyle)"
          :bodyStyle="bodyStyle"
          v-bind="_attrs"
          :getContainer="() => $refs.gismap"
          :mask="false"
          :maskClosable="false"
          v-on="$listeners"
          @ok="handleOk"
          @cancel="handleCancel"
          cancelText="关闭">
            <!-- 内容区域 -->
        </a-modal>
      </div>
    </template>
    

      挂载位置如下图:

      这样,样式就可以在当前组件中生效啦!See You!


    PS:生命很短暂,别把那些重要的话憋着,会没有时间说的。

  • 相关阅读:
    防止网站被镜像,被iframe
    PHP实现图片批量压缩
    常规正则表达式
    git安装项目步骤
    Laravel创建自定义 Artisan 控制台命令实例教程
    git常规命令
    JS验证身份证号
    Lucene-索引库的维护
    Lucene-分词器
    Lucene-全文检索
  • 原文地址:https://www.cnblogs.com/trampeagle/p/15146668.html
Copyright © 2020-2023  润新知