0

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

组件.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

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

4

1 回答 1

0

我自己找到了答案，如果有人希望在模态窗口中有一个接受或取消按钮，那么您可能可以使用 vuesax 中的对话框，这里是文档的链接： https ://lusaxweb.github.io/vuesax/组件/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
     }
  }

谢谢，我希望这可以帮助你。

于 2021-01-18T11:28:41.720 回答