AntdesignVue 局部全屏后Message、Select 、Modal、Date等组件不显示问题解决方案(最终版)
1、对this.$message.....这种的消息提示组件解决方案如下1、对this.$message.....这种的消息提示组件解决方案如下在main.js中全局配置消息提示测试可以在父组件DIV全屏后可以弹出提示。
·
1、对this.$message.....这种的消息提示组件解决方案如下
在main.js中全局配置消息提示
//单独引用需修改的元素
import { message } from 'ant-design-vue'
message.config({
maxCount: 1,
getContainer:() => document.getElementById('showBigModal') || document.body //父组件元素ID 找不到时 挂载到body上
})
测试可以在父组件DIV全屏后可以弹出提示
上面的不太好使优化下 用路由前置守卫处理下 这段代码放在初始化路由之前
router.beforeEach((to,from,next)=>{
if(to.path){
Vue.prototype.$message = message
message.config({
maxCount: 3,
getContainer:() => document.getElementById('thisPage') || document.body //父组件元素ID
})
}
next()
})
2、对a-select.....这种的下拉组件解决方案如下
修改挂载节点(默认是挂载到body上)
:getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}"
3、对date.....这种的时间下拉组件解决方案如下
:getCalendarContainer="(triggerNode) => triggerNode.parentNode"
4、对Modal.....这种的弹窗组件解决方案如下
第一种情况:a-modal在当前父组件中时
对父节点的div加上ref (能获取到dom节点)
然后在a-modal中这样写
:getContainer = "()=>$refs.allModal"
第二种情况:a-modal在子组件中时
用props从父组件中获取到ref
在子组件中使用
这样就可以局部全屏后能弹窗modal框了
5、对confirm Modal.....这种的弹窗组件解决方案如下
获取父组件传过来的ref dom节点
props接收
全局这样配置select不生效 ????有解决的大佬麻烦告知一声哈
Select.props.getPopupContainer.default = triggerNode => {
return triggerNode.parentNode || document.getElementById('fullscreen') || document.body
}
更多推荐
已为社区贡献19条内容
所有评论(0)