javascript - 无法设置 buefy 模态宽度

Question

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

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

有人可以帮帮我吗。

Answer 1

您还需要在组件中设置 style="width: auto" ，然后将您打开模态时设置的宽度考虑在内。

然后 js 部分将保留

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

你的组件将是

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

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

Answer 2

实际上，对我来说它不起作用。

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

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

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

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

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

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