无法删除Default中的默认组件

[qifan2019]

默认的示例页中的组件无法删除

[qifan2019]

问题已解决 原因有三个 1、是因为bootstrap的默认modal 的z-index过低 ,默认是1050 将node_modules\bootstrap\scss_modal.scss 的.modal中的z-index: $zindex-modal，改为Z-index：3000 2、modal框的opacity为0，导致模态框显示不出来 3、modal在关闭时候的嵌套回调有问题，但我不知道问题在哪，我把嵌套拆开就没有问题了 2、3都在lib/components/modal/StackModal.vue中更改 `

`

[qifan2019]

<template>
  <div ref="modal" class="v-jdesign-modal">
    <div
      :key="index"
      :ref="`popup_${index}`"
      v-for="(item, index) in stackModals"
      class="modal fade"
      style="display: block !important "
    >
      <div class="modal-dialog" :class="`modal-${item.size}`">
        <v-jform
          tag="div"
          class="modal-content"
          v-model="item.model"
          :fields="item.form.fields"
          :datasource="item.form.datasource"
          :listeners="item.form.listeners"
          :components="edit.components"
          :initialling="item.form.initialling"
        ></v-jform>
      </div>
    </div>
    <div ref="backdrop" class="modal-backdrop fade"></div>
  </div>
</template>

<script>
import vjform from 'vjform'
import { mapGetters } from 'vuex'

const TRANSITION_END = 'transitionend'
const Z_INDEX_UNIT = 5

export default {
  props: { modals: Array },
  components: { [vjform.name]: vjform },
  computed: { ...mapGetters(['edit']) },
  data() {
    return {
      stackModals: [...this.modals]
    }
  },
  watch: {
    'modals.length'(newValue, originValue) {
      console.log('new:', newValue, 'old:', originValue)
      if (newValue > originValue && newValue > 0) {
        this.syncModals()
        this.$nextTick(() => {
          this.pushShow(newValue - 1)
        })
      } else {
        console.log('zheli')
        this.popClose()
      }
    }
  },
  methods: {
    addBodyClass() {
      document.body.classList.add('modal-open')
    },
    removeBodyClass() {
      document.body.classList.remove('modal-open')
    },
    pushShow(index) {
      if (this.modals.length > 0) {
        this.addBodyClass()
      }

      const maxIndex = 1024 + this.getMaxZIndex()

      const modal = this.$refs.modal
      const backdrop = this.$refs.backdrop

      if (this.modals.length > 1) {
        // 已有弹窗
        this.setZIndex(backdrop, maxIndex + Z_INDEX_UNIT)

        const popup = modal.querySelectorAll('.modal')[index]

        if (popup) {
          this.setShow(popup, maxIndex + Z_INDEX_UNIT * 2)
        }
      } else {
        // 第一次弹窗

        this.setShow(modal, maxIndex)

        setTimeout(() => {
          this.setShow(backdrop, maxIndex)
          this.once(backdrop, TRANSITION_END, () => {
            const popup = modal.querySelectorAll('.modal')[index]
            if (popup) {
              this.setShow(popup, maxIndex + Z_INDEX_UNIT)
            }
          })
        })
      }
    },
    popClose() {
      const index = this.stackModals.length - 1
      const backdrop = this.$refs.backdrop
      const modal = this.$refs.modal
      const popup = modal.querySelectorAll('.modal')[index]

      if (!popup) {
        console.log('不存在')
        return
      }
      console.log(popup)
      this.setClose(popup, this.closeCallBack(backdrop, modal, index))
    },
    closeCallBack(backdrop, modal, index) {
      console.log('closeCallBack')
      if (this.modals.length > 0) {
        // 还存在窗口
        console.log('exist')
        const prePopup = modal.querySelectorAll('.modal')[index - 1]
        const current = window.getComputedStyle(prePopup).zIndex
        this.setZIndex(backdrop, +current - Z_INDEX_UNIT * 2)
        this.syncModals()
      } else {
        // 不存在窗口
        console.log('not exist')
        this.setClose(backdrop, () => {
          this.setClose(modal, () => {
            this.syncModals()
          })
        })
      }
    },
    // utils
    syncModals() {
      this.stackModals = [...this.modals]
    },
    setZIndex(elm, zindex) {
      const styles = (elm.getAttribute('style') || '')
        .split(';')
        .map(item => item.trim())
        .filter(item => !/^z-index:/.test(item))
      styles.push(`z-index: ${zindex}`)

      elm.setAttribute(
        'style',
        styles.filter(item => item.trim() !== '').join('; ')
      )
      console.log('elm', elm)
    },
    setShow(elm, zindex) {
      console.log('z-index1:', zindex)
      this.setZIndex(elm, zindex)
      elm.classList.add('show')
    },

    setClose(elm, callback) {
      elm.classList.remove('show')
      console.log('setClose')
      this.once(elm, TRANSITION_END, this.onceCallBack(elm, callback))
    },
    onceCallBack(elm, callback) {
      console.log('onceCallBack')
      const styles = (elm.getAttribute('style') || '')
        .split(';')
        .map(item => item.trim())
        .filter(item => !/^z-index:/.test(item))
      console.log('style', styles)
      elm.setAttribute(
        'style',
        styles.filter(item => item.trim() !== '').join('; ')
      )
      ;(callback || (() => {}))()
    },
    once(elm, evt, callback) {
      console.log('once')
      const fn = () => {
        elm.removeEventListener(evt, fn)
        callback()
      }
      elm.addEventListener(evt, fn)
    },
    //计算当前最大的z-index
    getMaxZIndex() {
      let maxIndex = 0
      document.querySelectorAll('*').forEach(elm => {
        const current = window.getComputedStyle(elm).zIndex
        if (current > maxIndex) {
          maxIndex = current
        }
      })
      return maxIndex === 'auto' ? 1024 : +maxIndex
    }
  }
}
</script>

<style lang="scss">
.v-jdesign-modal {
  display: none;

  &.show {
    display: block !important;
  }

  > .modal {
    overflow: auto !important;
    &.fade {
     /* 修改如下 */
      opacity: 1 !important;
      &.show {
        .modal-dialog {
          -webkit-transform: none;
          transform: none;
        }
      }

      .modal-dialog {
        transition: -webkit-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        /*     -webkit-transform: translate(0, -50px);
        transform: translate(0, -50px); */
        //修改如下
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
      }
    }
  }
}

</style>