无法设置buefy模态宽度

Question

我正在使用带有bulma和buefy的vuejs。我正在使用buefy模态并尝试使用其'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 documentation中的示例也包括它，但是它们没有明确说明您需要使用它来设置宽度。

Answer 2

实际上，对我来说这是行不通的。

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

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

<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>

这不是最漂亮的解决方案，但是可以。 我还必须在.modal中添加z-index，作为html模态背景的某些部分。