vue中将模态框移动到body中的方法

注意：此方法会造成离开过渡动画失效

<template>
    <div class="modal-box" v-to-body>
        <div class="content">
            <slot />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      inserted: false
    };
  },
  props: {
    toBody: {
      type: Boolean,
      default: true
    }
  },
  directives: {
    toBody: {
      inserted(el, binding, vnode) {
        if (!vnode.context.toBody) {
          return;
        }
        if (window.modalBoxzIndex) {
          el.style.zIndex = window.modalBoxzIndex;
          window.modalBoxzIndex = Number(window.modalBoxzIndex) + 1;

        } else {
          window.modalBoxzIndex = 999;
          el.style.zIndex = window.modalBoxzIndex;
        }
        vnode.context.inserted = true;
        document.body.appendChild(el);
      },
      unbind(el, binding, vnode) {
        if (vnode.context.inserted) {
          document.body.removeChild(el);
        }
      }
    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
  },
  destroyed() {
  },
  watch: {

  },
  methods: {

  },
  components: {

  }
};
</script>

<style lang="scss" scoped>
    .modal-box{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba($color: #000000, $alpha: .7);
        z-index: 1000;
        .content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
</style>