如何更改道具值以在 VueJS 的上下文中关闭 vs-popup答案

【问题标题】：How to change the props value in order to close the vs-popup in the context of VueJS如何更改道具值以在 VueJS 的上下文中关闭 vs-popup
【发布时间】：2021-04-22 03:05:42
【问题描述】：

我正在使用 Vuesax vs-popup，我正在尝试关闭在 vs-popup 内部使用的按钮单击时的 vs-popup。

Vspopup.vue

 <div v-show="active" ref="con" :class="[`vs-popup-${color}`,{'fullscreen':fullscreen}]" class="vs-component con-vs-popup" @click="close($event,true)">
        <header :style="styleHeader" class="vs-popup--header">
          <div class="vs-popup--title">
            <h3>{{ title }}</h3>
            <slot name="subtitle" />
          </div>
          <vs-icon v-if="!buttonCloseHidden" ref="btnclose" :icon-pack="iconPack" :icon="iconClose" :style="stylePopup" class="vs-popup--close vs-popup--close--icon" @click="close"/>
        </header>
    ...
      methods:{
        close(event,con){
          if(con){
            if(event.target.className
              && event.target.className.indexOf
              && event.target.className.indexOf('vs-popup--background')!=-1){
              this.$emit('update:active',false)
              this.$emit('close', false)
            } else if(!this.buttonCloseHidden && event.srcElement == this.$refs.btnclose.$el){
              this.$emit('update:active',false)
              this.$emit('close', false)
            }
          }
        }

Component.vue：

<vs-button  class="button"  @click="showPopup= true">Open popup</vs-button>
 <vs-popup title="Want to close by button" :active.sync="showPopup">
      <vs-button  class="close btn"  @click="showPopup= false" >Cancel btn</vs-button>
  </vs-popup>
  ....
  data () {
      return {
          showPopup: false
      }
  }

我正在尝试使用取消按钮关闭 vs-popup，但我不知道该怎么做，在 Vuesax 中查看了 vs-popup 的文档，实际上知道它可以通过更改道具值。这是文档：https://lusaxweb.github.io/vuesax/components/popup.html

如果有人知道怎么做，请帮助我。

【问题讨论】：

标签： vue.js vuesax

【解决方案1】：

我自己找到了答案，如果有人希望在模态窗口中有一个接受或取消按钮，那么你可以使用 vuesax 中的对话框，这里是文档的链接： https://lusaxweb.github.io/vuesax/components/dialog.html

请查看这些问题以了解有关道具变异的更多信息：

这里，我可以通过实现方法来解决这个问题，代码如下：

<vs-button  class="button"  @click="showPopup= true">Open popup</vs-button>
 <vs-popup title="Want to close by button" :active.sync="showPopup">
      <vs-button  class="close btn"  @click="closeBtn($event)" >Cancel btn</vs-button>
  </vs-popup>
  ....
  data () {
      return {
          showPopup: false
      }
  }
    methods: {
     closeBtn(event) {
         return this.showPopup= false
     }
  }

谢谢，希望对你有帮助。

【讨论】：