xy-ui xy-tab 内部的 xy-dialog 组件大小会被限制，无法铺满全屏

问题描述

当 xy-dialog 组件放在 xy-tab 内部的时候，开启 xy-dialog 后，xy-dialog 的大小不会超出 xy-tab 的宽高

在多层组件嵌套时， xy-dialog 所在的组件会是 xy-tab 组件的 tab 之一，此时 xy-dialog 将不可避免的嵌套在 xy-tab 内部, 如果 xy-tab 所在的组件没有全屏宽高，其内部的 xy-dialog 也将无法铺满全屏

示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .wrapper {
      display: flex;
      width: 100vw;
      height: 50vh;
    }

    .top {
      background-color: #3fceff;
    }

    .bottom {
      background-color: #f1db87;
    }
  </style>
</head>
<body>

<script type="module" async>
  import './xy_ui/index.js'
</script>

<div class="wrapper top">
  top
</div>
<div class="wrapper bottom">
  bottom
  <xy-tab>
    <xy-tab-content label="tab1">
      <xy-dialog class="dialog" title="dialog" footer="false">

      </xy-dialog>
    </xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
  </xy-tab>
</div>

<script>
  window.onload = function () {
    document.querySelector('.dialog').open = true
  }

</script>

</body>
</html>

期望行为

在多层组件嵌套时，xy-tab 内部的 xy-dialog 开启时默认铺满屏幕

版本 1.3.3

Aug 01 '19 08:08 WangShuXian6

fixed定位问题。tab里面用到了transfrom，所以dialog相对于tab定位。建议放在外部，语意也更好 (本来对话框就应该放在根节点)

Aug 01 '19 08:08 XboxYan

目前把 dialog 当作一个弹出层样式的容器来使用，里面包括很多其他组件和私有功能，逻辑上是附属于拥有这些功能的父组件，也就是这个 dialog 所在的组件。

一般子组件操作自己内部的元素这样比较好，不会影响外部，也不会被外部修改

this._publicBtn = this.shadowRoot.querySelector('.public')

现在是这样的，要操作子组件外部的元素，已经不确定是否会被其他组件修改或修改的是其他组件的东西了

this._selectModal = document.body.querySelector('.select-modal')

恳求大佬在不忙的时候抽出宝贵时间试试优化一下，我试着改了改没有成功暂时把 dialog 放到最外层使用了

Aug 01 '19 08:08 WangShuXian6

有一个解决方式是把tab的滚动由transform改为left，但不是根本解决方式。

建议不要过于组件化，不要用react的思维来使用web组件，没有统一的数据管理，传递起来会很麻烦。

可能最后查找一个元素会变成这样...

this.shadowRoot.querySelector('.public').shadowRoot.querySelector('button')

Aug 01 '19 09:08 XboxYan

great

Aug 25 '20 08:08 millicake3695