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

作者：不愛程式設計的程式設計師
連結：