遮罩层-导致整个页面置灰点击无反应

遮罩层-导致整个页面置灰点击无反应

1. 解决方法:

 设置dialog的append-to-body属性为true

带来的问题

append-to-body设为true后,导致弹窗样式失效。解决办法是将dialog样式设置到body
3. 参考资料链接

dialog的append-to-body属性置为true后,dialog的父元素为</body/>

4. 代码示例:

<template>
    <div class='mytest'>
        <xui-dialog :visible.sync="dialogShow"
            :title="t('problemPrompt.chooseCloseReason')"
            width="460px"
            class='object-select-dialog'
            :close-on-click-modal="false"
            :show-close="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            @close="closeHandler">
        </xui-dialog>
    </div>
</template>  
<style scoped>
.object-select-dialog >>> .option-item {
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
}
.object-select-dialog >>> .option-item .reason-name {
  color: #999;
}
.object-select-dialog >>> .xui-radio-group > label {
  margin-left: -7px;
  text-align: left !important;
}         
.....
</style>