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

【问题标题】：How to resize vs-popup in the context of vuejs如何在 vuejs 的上下文中调整 vs-popup 的大小
【发布时间】：2020-12-17 10:08:42
【问题描述】：

我使用 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>

我得到的输出发送如下：

我希望弹出窗口更大，并且应该灵活，以便我添加的任何内容都必须相应地适应。

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

【问题讨论】：

标签： vue.js popup

【解决方案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;
  }
}

【讨论】：