无法设置 buefy 模态宽度答案

【问题标题】：unable to set buefy modal width无法设置 buefy 模态宽度
【发布时间】：2018-06-06 11:20:34
【问题描述】：

我正在使用带有 bulma 和 buefy 的 vuejs。我正在使用 buefy modal 并尝试使用其“width”属性设置模态宽度。我试图在 html 中指定它以及使用 javascript 打开模式。

this.$modal.open({
  parent: this,
  component: dummyComponent,
  width: 720
})

谁能帮帮我。

【问题讨论】：

【解决方案1】：

你还需要在你的组件中设置style="width: auto"，然后你在打开modal时设置的宽度会被考虑进去。

那么js部分就留下来

this.$modal.open({
  parent: this,
  component: dummyComponent,
  width: 720
})

你的组件会是

<template>
  <div class="modal-card" style="width: auto">
   <!-- Content comes here... -->
  </div>
</template>

buefy documentation 中的示例也包含它，但它们没有明确说明您需要它来设置宽度。

【讨论】：

【解决方案2】：

其实对我来说是行不通的。

this.$modal.open({
  parent: this,
  component: dummyComponent,
  width: 1200
})

它生成宽度为 640 像素的模态。如果我设置

<template>
  <div class="modal-card" style="width: auto">
    <!-- Content comes here... -->
  </div>
</template>

它会产生更窄的模态，460 像素。不知道为什么。我的解决方案是：

<style lang="stylus" scoped>
  .modal-card
    width: auto
  @media (min-width: 1200px)
    .modal-card
      width: 1200px
</style>

不是最漂亮的解决方案，但它确实有效。我还必须将 z-index 添加到 .modal，因为我的 html 覆盖模态背景的某些部分。

【讨论】：