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:
关于模态实例,有几种有用的方法:
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,则模式实例将在关闭时自动销毁。
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。
vue 异步延迟加载