PluginModal.vue

<template>
  <div
    :class="{'active': state > 0, 'hide': state == 0}"
    class="modal-backdrop"
    @touchstart="hide(0)">
    <div class="modal-backdrop-bg"/>
    <!--<div class="modal-wrapper">-->
    <div
      :class="[
        modalClass,cusClass
      ]"
      class="modal slide-in-up"
      @touchstart="start"
      @mousedown="start">
      <div hls-modal-content/>
    </div>
  </div>
  <!--</div>-->
</template>
<script>
const show_modal_animate_dur = 400 // eslint-disable-line
const hide_modal_animate_dur = 250 // eslint-disable-line
export default {
  props: {
    cusClass: {
      type: String,
      default: '',
    },
    destroyOnHide: {
      type: Boolean,
      default: false,
    },
    onShow: Function, // eslint-disable-line
    onHide: Function, // eslint-disable-line
  },
  data () {
    return {
      state: 0,
    }
  },
  computed: {
    modalClass () {
      let mclass
      if (this.state === 1) {
        mclass = 'active'
      } else if (this.state === 2) {
        mclass = 'ng-enter ng-enter-active active'
      } else if (this.state === 3) {
        mclass = 'ng-leave ng-leave-active'
      }
      return mclass
    },
  },
  destroyed () {
    this.$el.parentNode.removeChild(this.$el)
  },
  methods: {
    preventDefault (e) {
      e.stopPropagation()
    },
    start (e) {
      e.stopPropagation()
      this.hide(1)
    },
    show () {
      if (this.onShow) {
        this.onShow()
      }
      this.state = 1
      setTimeout(() => {
        this.state = 2
        setTimeout(() => {
        }, show_modal_animate_dur)
      }, 50)
    },
    hide (a) {
      if (!a) {
        if (this.onHide) {
          this.onHide()
        }
        this.state = 3
        setTimeout(() => {
          this.state = 0
          if (this.destroyOnHide) {
            this.$destroy()
          }
        }, hide_modal_animate_dur)
      }
    },
  },
}
</script>