【开发问题记录】ant design vue 的getPopupContainer

的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效。在 ant design vue 中，有几个组件是有。默认是渲染到body 上的，所以如果你想要对。属性的，比如：下拉菜单。

嘤嘤怪呆呆狗

3381人浏览 · 2023-10-28 11:06:09

嘤嘤怪呆呆狗 · 2023-10-28 11:06:09 发布

在 ant design vue 中，有几个组件是有 getPopupContainer 属性的，比如：下拉菜单

在这里插入图片描述

默认是渲染到body 上的，所以如果你想要对 下拉选择组件 的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效

在这里插入图片描述

所以，需要指定 getPopupContainer ，用法如下

在这里插入图片描述

      <a-dropdown
        :trigger="['hover']"
        :arrow="{ pointAtCenter: true }"
        placement="bottomRight"
        :open="true"
        :get-popup-container="getPopupContainer"
      >
      </a-dropdown>

<script setup lang="ts" name="layoutHeader">
const getPopupContainer = () => document.querySelector('.layoutHeader') as HTMLElement
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^