Ant Design Vue组件,a-select标签

        a-select标签是组件里的选择框,具体使用可以查看官网,这里记录一下在使用中遇到的问题。

        最近在做项目的时候有一个需求在 a-modal 标签中加入 a-select 标签,a-modal 是模态对话框,意思就是在模态对话框里面添加选择框,点击选择框的时候,选择项会随页面滚动。

刚点开的时候:

Ant Design Vue组件,a-select标签_第1张图片

之后滚动页面:

 Ant Design Vue组件,a-select标签_第2张图片

         只有鼠标悬浮在选择项上滚动才会出现这种情况,悬浮在其他地方是不会出现的。

        之后我查看了页面的结构,出现这种情况是因为 选择项是默认渲染到 body 上的。

a-select节点的位置:

Ant Design Vue组件,a-select标签_第3张图片

选项菜单的位置:

 Ant Design Vue组件,a-select标签_第4张图片

         所以只要把选项也放到 id='app' 这个标签里就可以避免这个问题。

        组件提供了一个属性:

         在标签里添加   :getPopupContainer="triggerNode => triggerNode.parentNode"  这个属性,改变页面结构。

Ant Design Vue组件,a-select标签_第5张图片

        而日期选择框也有这个问题:

Ant Design Vue组件,a-select标签_第6张图片

         antdv组件在三版本时是用  getPopupContainer  ,而在三版本之前是使用  getCalendarContainer  。

Open Modal



你可能感兴趣的:(vue.js,前端,javascript)