如何在 vuejs 的上下文中调整 vs-popup 的大小

Question

我使用 vs-popup 以便在单击按钮时显示内容，但是 vs-popup 的大小是固定的，而且我的内容看起来很笨拙，所以我希望有人告诉我如何更改根据我的要求弹出窗口的宽度。

<vs-button class="btn" @click=" showModal=true" color="#7367F0" > Click me</vs-button>
<vs-popup class="helundo" title="How will i resize popup" :active.sync="showModal">
<div class="vx-row">
  <div class="vx-col w-full md:w-1/2 mb-base">
     <p> I want this content in the left</p>
  </div>
  <div class="vx-col w-full md:w-1/2 mb-base">
      <p> I want this content in the right</p>
  </div>
</div>
</vs-popup>

<script>
export default {
  data () {
    return {
      showModal: false
    }
  }
}
</script>

<style>
<!-- what should I add in order to resize the popup -->
</style>

我获得的输出发送如下：

我想要更大的弹出窗口，它应该是灵活的，这样我添加的任何内容都必须相应地适合。

请帮帮我，因为我无法更改弹出窗口的宽度，我所做的都是一样的，但如果我添加太多内容，宽度会增加以扩展并变得可滚动。

Answer 1

我自己找到了答案，我发帖是为了帮助别人。如果您正在使用 vuesax 库，您可能会发现 _fixesVuesax.scss

所以只需将此代码放在那里：

.con-vs-popup {
  z-index: 53000;

  .vs-popup {
    width: 200px !important; //You can change the width according to your content
    height: auto;
  }
  .vs-popup--content {
    width: auto !important;
    padding: 1rem;
    font-size: 1rem;
  }
}

如何在 vuejs 的上下文中调整 vs-popup 的大小

How to resize vs-popup in the context of vuejs

popup

vue.js