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

Question

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

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

Answer 1

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

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

Avoid mutating a prop directly since the value will be overwritten

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

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

谢谢，希望对您有所帮助。

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

How to change the props value in order to close the vs-popup in the context of VueJS

vue.js

vuesax