无法设置buefy模式宽度

Question

我将vuejs与bulma和buefy一起使用。我正在使用buefy modal，并尝试使用它的“width”属性来设置模式宽度。我尝试在html中指定它，并使用javascript打开模式。

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

谁能帮帮我。

Answer 1

您还需要在组件中设置宽度“style=：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的modal。如果我设置

<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的某些部分覆盖了模式背景。