Question

我有一个引导卡组件，我将在角落添加一个图标以最小化和关闭（关闭）该组件。我能够做到这一点。

我接下来要单击的图标将扩展卡组件以填充查看区域。

查看区域是屏幕ID为“ main”的一部分。

然后，用户将能够再次单击该图标，它将恢复为原始大小。

我看过一个调整大小的javascript函数，但并非所有浏览器都支持此功能。我需要在99％的浏览器（IE11，edge，firefox等）中都能正常工作的东西

有人知道我如何获得此功能吗？

Answer 1

也许是这样的：

<template>
  <b-card bg-variant="primary" text-variant="white" class="text-center" :class="{ maximized }" ref="card">
    <div slot="header">
      {{ title }}
      <div class="card-header-actions">
        <b-link class="card-header-action btn-minimize" v-on:click="toggle">
          <i class="fas fa-chevron-down" />
        </b-link>
        <b-link class="pl-2 card-header-action btn-close" v-on:click="maximize">
          <i class="fas fa-arrows-alt" />
        </b-link>
      </div>
    </div>
    <b-collapse id="collapse" v-show="expand" visible>
      <b-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </b-card-text>
    </b-collapse>
  </b-card>
</template>

<script>
export default {
  name: "card",
  props: {
    title: String
  },
  methods: {
    toggle() {
      this.expand = !this.expand;
    },
    maximize() {
      this.$data.maximized = !this.$data.maximized;
      var elem = this.$refs.card;
      if (this.$data.maximized){
        const main = document.getElementById("main");
        const rect = main.getBoundingClientRect();
        elem.style.height = rect.height+"px";
        elem.style.width = rect.width+"px";
        elem.style.top = rect.top+"px";
        elem.style.left = rect.left+"px";
      } else {
        elem.style.height = null;
        elem.style.width = null;       
        elem.style.top = null;
        elem.style.left = null;
      }
      //alert("Maximize the card!");
    }
  },
  data: () => {
    return {
      expand: true,
      maximized: false
    };
  }
};
</script>

<style>
#main {
  margin: 50px;
  height: 300px;
}
.card-header-action {
  color: white;
}
.card-header-actions {
  display: inline;
}
.card.maximized {
  position: fixed;
  z-index: 10;
}
</style>

此代码设置了卡片元素的样式属性。因此，也许这不是完美的解决方案。我在chrome和Edge中进行了测试。在IE11中，codeandbox.io没有打开：（

扩展vue组件以填充另一个父div

1 个答案: