首页手记 iView之Modal(一级弹窗和二级弹窗)

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

标签：

Vue.js

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>

效果如下图