2018/06/19 关于iView Modal组件的扩展

[ChenPt]

之前写的Modal模块，因为有两个Modal，所以就写了两个，但是代码重复性比较高，所以就修改了下路由文件和逻辑，将两个Modal合并为一个统一的自定义Modal组件 之前的两个Modal示例

就是在Modal里使用的子组件不同。

对于Iview的Modal，只是很简单的一个组件，如果还想把一个组件放在Modal里显示的话（这种需求其实特别多），需要自己改进下Modal.

如果是通过Modal的形式 加上Router来打开一个组件，那么就需要监听关闭Modal的事件，当事件发生时，路由需要回到点击进来当前路由时的父路由。

调用Modal的方法。在router.js文件中需要调用到的父路由下注册Modal路由。然后在需要调用Modal的组件中，设置 当某个唤醒Modal的特定事件发生时，则调用路由实例的push方法进行跳转this.$router.push到Modal组件. 可以传各种参数. 在router-view 通过props的方式传 backUrl（也就是当前父组件在router.js里的注册名字）, content (Modal中实际显示的组件的名字) 通过component标签 的is属性来动态渲染组件. 根据content传过来的值来决定渲染哪个组件.

<template>
  <div class="detail-modal-container">
    <Modal
      class="detail-modal"
      v-model="isShow"
      :styles="{width: '90%', top: '30px', overflow: 'hidden'}"
      @on-ok="() => {
        $router.push({
          name: backUrl
        })
      }"
      @on-cancel="() => {
        $router.push({
          name: backUrl
        })
      }"
    >
      <!-- 实际modal显示的内容组件 -->
      <component :is="showComponent"></component>
      <!-- 使用自定义footer的形式来消除iview Modal携带的按钮 -->
      <div slot="footer">
      </div>
    </Modal>
  </div>
</template>

<script>

export default {
  name: "ModalCustom",
  components: {
    //异步局部注册
    CmdbDetail: () => import ('../cmdbDetail.vue'),
    TrendDetail: () => import('../trendDetail.vue'),
  },
  props: {
    backUrl: {
      type: String
    },
    modal: {
      type: Boolean
    },
    content: {
      type: String
    }
  },
  data() {
    return {
      isShow: false,
    }
  },
  computed: {
    showComponent() {
      return this.content
    }
  },
  mounted() {
    this.isShow = this.modal
  },
  activated() {
    this.isShow = this.modal
  },
  created() {
  },
  watch: {
    //路由变化，若不是当前路由，而是跳转到其他路由，则关闭Modal
    $route (newVal) {
      // 判断是否还是当前路由
      if (newVal.name !== 'ModalCustom') {
        this.isShow = false
      }
    }
  }
}

</script>

<style lang="scss">
  .detail-modal {
    .ivu-icon-ios-close-empty {
      font-size: 50px;
      font-weight: bold;
      color: #666;
    }
  }

</style>