Vue Tailwind Modal

<template>
  <div ref="modal_wrapper" class="modal_wrapper w-0 h-0 fixed z-50 inset-0 overflow-y-auto opacity-0" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div ref="modal_content" class="modal_content items-end justify-center text-center sm:block sm:p-0 flex pb-10 relative top-32">
      <div ref="modal_backdrop" :class="{'opacity-0 w-0 h-0':!opened,'w-full h-full opacity-100':opened}" v-on:click="close()" class="modal_backdrop fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
      <div ref="modal_body" :class="{'opacity-100 translate-y-0 sm:scale-100':opened,'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95':!opened}" class="modal_body relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ease-in-out duration-200">
        <slot name="body">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            
          </div>
        </slot>
        <slot name="footer">
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button" v-on:click="close()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Tutup</button>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return {
      opened:false
    }
  },
  methods:{
    open(){
      if(this.opened) return
      this.opened = true
      document.body.classList.add('overflow-hidden')
      this.$refs.modal_wrapper.classList.remove('fixed')
      this.$refs.modal_wrapper.classList.remove('w-0')
      this.$refs.modal_wrapper.classList.remove('h-0')

      this.$refs.modal_wrapper.classList.add('fixed')
      this.$refs.modal_wrapper.classList.add('opacity-100')

      this.$refs.modal_content.classList.remove('w-0')
      this.$refs.modal_content.classList.remove('h-0')
      // this.$refs.modal_content.classList.remove('absolute')
      // this.$refs.modal_content.classList.add('min-h-screen')

      this.$refs.modal_backdrop.classList.remove('w-0')
      this.$refs.modal_backdrop.classList.remove('h-0')
      this.$refs.modal_backdrop.classList.remove('absolute')
    },
    close(){
      if(!this.opened) return
      this.opened = false
      document.body.classList.remove('overflow-hidden')
      setTimeout(() => {
        this.$refs.modal_wrapper.classList.add('fixed')
        this.$refs.modal_wrapper.classList.add('w-0')
        this.$refs.modal_wrapper.classList.add('h-0')

        this.$refs.modal_wrapper.classList.remove('fixed')
        this.$refs.modal_wrapper.classList.remove('opacity-100')

        this.$refs.modal_content.classList.add('w-0')
        this.$refs.modal_content.classList.add('h-0')
        // this.$refs.modal_content.classList.add('absolute')
        // this.$refs.modal_content.classList.remove('min-h-screen')

        this.$refs.modal_backdrop.classList.add('w-0')
        this.$refs.modal_backdrop.classList.add('h-0')
        this.$refs.modal_backdrop.classList.add('absolute')
      }, 200);
    }
  },
  mounted(){
    this.$nextTick(()=>{
      // this.close()
    })
  }
}
</script>