<template>
  <div id="app">
    <button @click="show">open</button>
    <div v-if="isShow">
      <ejs-dialog
        ref="templateDialog"
        :showCloseIcon="true"
        :content="contentTemplate"
        @close="hide"
      />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { DialogPlugin, DialogComponent } from '@syncfusion/ej2-vue-popups';

Vue.use(DialogPlugin);

export default Vue.extend({
  data () {
    return {
      contentTemplate () {
        return {
          template: {
            render (h: any) {
              return h('DIV', 'content')
            },
            destroyed () {
              console.log('destroyed');
            }
          }
        }
      },
      isShow: false
    }
  },
  methods: {
    show () {
      this.isShow = true
      if (this.$refs.templateDialog) {
        (<DialogComponent>this.$refs.templateDialog).show();
      }
    },
    hide () {
      this.isShow = false
    }
  }
});
</script>

<style>
  body, html {
    height: 100%;
  }
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
</style>
