iView之Modal(一级弹窗和二级弹窗)

iview之Modal

一、普通组件使用方法

普通组件使用方法直接在页面中写<Modal></Modal>标签,在页面内可以写内容。内容也可以自定义标签引入。下面是两种方式引入内容

• 第一种，直接在Modal标签内写内容

<template>
  <div>
    <Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
    <Modal
      v-model="modal1"
      title="普通组件使用方法"
      @on-ok="ok"
      @on-cancel="cancel">
      <h1>普通组件使用方法</h1> //自定义内容
    </Modal>
  </div>
</template>
<script>
  export default {
    name: "normalModal",
    data() {
      return {
        modal1: false
      }
    },
    methods: {
      ok() {},
      cancel(){}
    }
  }
</script>
<style scoped>
</style>

• 第二种,在Modal标签内引入自定义组件

<template>
  <div>
    <Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
    <Modal
      v-model="modal1"
      title="普通组件使用方法"
      @on-ok="ok"
      @on-cancel="cancel">
     <FirsModal></FirsModal>//使用自定义组件
    </Modal>
  </div>
</template>
<script>
    //引入自定义组件（弹窗的内容写在FirstModal组件内）
  const FirsModal = () => import("../components/FirstModal.vue"); 
  export default {
    name: "normalModal",
    data() {
      return {
        modal1: false
      }
    },
    methods: {
      ok() {},
      cancel(){}
    },
    components:{
      FirsModal//定义自定义组件
    }
  }
</script>
<style scoped>
</style>

一、实例化使用方法

实例化使用方法也分为两种，一种是直接在render函数内直接写Html标签进行页面渲染，另一种是render函数内写自定义的组件进行渲染

• 第一种

<template>
  <div class="hello">
    <Button @click="handleRender">实例化使用方法</Button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      handleRender () {
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.value,
                autofocus: true,
                placeholder: 'Please enter your name...'
              },
              on: {
                input: (val) => {
                  this.value = val;
                }
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
</style>

• 第二种

<template>
  <div class="hello">
    <Button @click="handleRender">实例化使用方法</Button>
  </div>
</template>
<script>
  const FirsModal = () => import("../components/FirstModal.vue");
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      handleRender () {
        this.$Modal.confirm({
          title: 'demo',
          render: (h) => {
            return h(FirsModal, {//在此处使用引入的组件
              ref: 'firstModal'
            })
          },
          width: 600,
          closable: false,
          okText: "确定",
          cancelText: "取消",
          loading: true,
          onOk() {}
        });
      }
    }
  }
</script>
<style scoped>
</style>

三、二级弹窗

有的业务场景需要使用到二级弹窗，即弹窗中再弹窗。在使用二级弹窗的时候。第一个弹窗实例化和普通组件两种方式都可以使用，第二个弹窗的时候只能使用第一种普通组件使用的方式才行，否则会进行覆盖弹窗。

Helloworld.vue

<template>
  <div class="hello">
    <Button @click="openFirstModal">打开第一个弹窗</Button>
  </div>
</template>
<script>
  const FirsModal = () => import("../components/FirstModal.vue");
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      openFirstModal() {
        this.$Modal.confirm({
          title: '第一个窗口',
          render: (h) => {
            return h(FirsModal, {
              ref: 'firstModal'
            })
          },
          width: 600,
          closable: false,
          okText: "确定",
          cancelText: "取消",
          loading: true,
          onOk() {
          }
        });
      }
    }
  }
</script>
<style scoped>
</style>

FirstModal.vue

<template>
  <div>
    <h1>第一个窗口</h1>
    <Button @click="openSecondModal">打开第二个弹窗</Button>
    <Modal v-model="showModal">
      <SecondModal></SecondModal>
    </Modal>
  </div>
</template>
<script>
  const SecondModal = () => import("@/components/SecondModal.vue");
  export default {
    name: "FirstModal",
    data() {
      return {
        showModal: false
      }
    },
    components: {
      SecondModal
    },
    methods: {
      openSecondModal() {
        this.showModal = true;
      }
    }
  }
</script>
<style scoped>
</style>

SecondModal.vue

<template>
  <div>
    <h1>我是第二个窗口</h1>
  </div>
</template>
<script>
  export default {
    name: "secondModal",
    data() {
      return {}
    },
  }
</script>
<style scoped>
</style>

效果如下图 二级弹窗.png