How to detect when close button is clicked?

[ryuchaehwa]

Hey!
I'm not sure where to write a question in terms of support cases.

I'm using your library and it's awesome. Thanks for the all hard work.
I have to detect when close button is clicked, but currently, it's only set as a parameter :closeButton="true"

Could you please let me know how to detect when close button is clicked?

Reagrds,

[terenceng2010]

You may watch isOpen changes from true to false instead.

[BryanBuitenhuis]

Hi,
How would you detect the change in the case of Sample 6?
Link to demo: https://michitaro.github.io/vue-window/?Sample6

In this part:

export class NumberWindow {
  private static id = 0
  id = NumberWindow.id++
  isOpen = true
  constructor(readonly n = Math.floor(100 * Math.random())) { }
  get label() {
    return `Number - ${this.n}`
  }
}

Because this does not work:

import { Vue, Component, Watch } from 'vue-property-decorator'

...

export class NumberWindow extends Vue {
  private static id = 0
  id = NumberWindow.id++
  isOpen = true
  constructor(readonly n = Math.floor(100 * Math.random())) {
    super();
  }
  get label() {
    return `Number - ${this.n}`
  }
  @Watch('isOpen')
  onPropertyChanged(value: string, oldValue: string) {
    // Do something
    console.log('isOpen has changed');
  }
}

[terenceng2010]

@BryanBuitenhuis I am not familiar with vue's class component syntax, I was doing something like below to detect the isOpen state, hope it helps:

updated: I also added a codesandbox sample for reference:
https://codesandbox.io/s/twilight-butterfly-1vgl9?file=/src/components/HelloWorld.vue

//assume you have a vue-window, with a my-component insides...
<template>
    <hsc-window-style-white>         
        <hsc-window :resizable="true" :closeButton="true"
            :isOpen.sync="w.isOpen">             
              <my-component
                :isOpen.sync="w.isOpen"
                />                                                    
        </hsc-window>
    </hsc-window-style-white>      
</template>

//the below part is at my-component
<script>
export default {
  props:['isOpen'],
  watch:{
    'isOpen':function(newValue){
      if(newValue === false){
         //do something when isOpen becomes false.
    }
  }
}
</script>