vue 异步延迟加载_适用于Vue的灵活模态组件，具有异步延迟加载功能

vue 异步延迟加载

Vue异步模式 (vue-async-modal)

Flexible modal component for Vue with ability of asynchronous lazy loading.

Vue的灵活模态组件，具有异步延迟加载功能。

用法 (Usage)

Firstly, you should add Modal component in your template.

首先，您应该在模板中添加Modal组件。

<template>
<div id="app">
  <modal/>
</div>
</template>
<script>
import { Modal } from 'vue-async-modal'

export default {
  components: {
    Modal
  }
}
</script>

Then, you will be able to get the modal instance via this.$modal in every Vue component.

然后，您将能够在每个Vue组件中通过this.$modal获取模态实例。

We provide a basic modal component ModalItem.

我们提供了一个基本的模态组件ModalItem 。

If you want to open modal MyModal in component Demo:

如果要在组件Demo打开模态MyModal ：

// Demo.vue
<template>
<button @click="loadMyModal"></button>
</template>
<script>
export default {
  methods: {
    loadMyModal() {
      this.$modal.open({
        id: 'my-modal',
        component: import('./MyModal.vue'),
        options: {
          destroy: true
        },
        props: {
          whatever
        }
      })
    }
  }
}
</script>


// MyModal.vue
<template>
<!-- the simplest way to use default header template an override modal-title is use prop header -->
<!-- if you want to use default footer template, just add prop `footer: true` -->
<!-- every ModalItem instance will show/disppear with a fade transition by default -->
<!-- you can define prop transition to use your own transition, or just pass empty string `transition` prop to disable it -->
<modal-item :header="Modal Header" :footer="true">
  <!-- slot header will be content of .modal-header -->
  <template slot="header">
    <button>×</button>
    <h4>
      <div class="modal-title">I'm Modal Title</div>
    </h4>
  </template>

  <!-- default slot will be used as content in .modal-body -->
  I'm content of Modal Body

  <!-- or you can use slot body to rewrite whole .modal-body -->
  <div class="modal-body" slot="body">
    Let's rewrite default .modal-body
  </div>

  <!-- you can overwrite footer content by slot footer -->
  <template slot="footer">
    <!-- cancle/confirm text can be rewrote by prop `cancleText` and `confirmText` -->
    <button class="btn btn-default">取消</button>
    <!-- if you are using `footer: true`, it will trigger `confirm` event on clicking confirm btn-->
    <!-- or you can use prop `disbaled: true` to disbale it -->
    <button class="btn btn-primary">确定</button>
  </template>
</modal-item>
</template>
<script>
import { ModalItem } from 'vue-async-modal'

export default {
  components: {
    ModalItem
  }
}
</script>

API (API)

There are several useful methods on modal instance:

关于模态实例，有几种有用的方法：

1. open a modal instance

   打开一个模态实例

this.$modal.open({id, component, options, props}): Promise

id is optional, if no id passed in, it will generate a id by timestamp.

id是可选的，如果没有传入任何id ，它将按时间戳生成一个id。

component could be a normal Vue component or a promise which will resolve a Vue component, so that we could use code spit and dynamic loading here.

component可以是普通的Vue component也可以是将解决Vue组件的Promise，因此我们可以在此处使用代码吐出和动态加载。

options: {show, backdrop, destroy}:

options: {show, backdrop, destroy} ：

show and backdrop will true if you don't set it.

如果未设置，则show和backdrop将为true。

If show is true, when you open modal, it will show automatically, or it will just add into DOM without displaying.

如果show为true，则打开模式时，它将自动显示，或者仅添加到DOM中而不显示。

If backdrop is true, modal will open with a transparent black backdrop, unless backdrop is static, when user click modal outside, modal will auto trigger close event.

如果backdrop为true，则模式会以透明的黑色背景打开，除非backdrop为static ，否则当用户在外部单击模式时，模式将自动触发close事件。

If destroy is true, the modal instance will destroy automatically on closing.

如果destroy为true，则模式实例将在关闭时自动销毁。

1. close or destroy a modal instance

   关闭或销毁模式实例

this.$modal.close(id, destroy): Promise

If id is falsy, it will be automatically choose current modal instance id.

如果id为假，它将自动选择当前模态实例ID。

if destroy is true, the modal instance will be destroyed even if it's options.destroy is false.

如果destroy为true，则该模式实例将被销毁，即使它的options.destroy为false。

翻译自: https://vuejsexamples.com/flexible-modal-component-for-vue-with-ability-of-asynchronous-lazy-loading/

vue 异步延迟加载