特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Modal弹框在Web应用或者Web页面上非常常见,很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让其能在各个Web页面或者应用上使用。在这篇文章中,学习一下如何使用transition
和slots
来创建可重用的Modal组件。
Modal构成
Modal对于大家来说是很常见的一个东东,在Dribbble上搜索modal
可以看到很多非常优秀的Modal设计。比如下面这个:
一般对于Modal弹框会有五个部分构成:
- Modal弹框的蒙层,一般是黑色半透明,全屏显示
- Modal弹框头部
- Modal弹框主体
- Modal弹框脚部
- Modal弹框关闭按钮
这是一个Modal弹框最常见的五个部分,当然不是所有的Modal弹框都会有这些东西。对于以前我们写一个Modal弹框会这样来写:
<div class="modal-backdrop">
<div class="modal">
<div class="modal-header">
<div class="modal-close"></div>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
很多时候在
modal-footer
中也会带有关闭弹框的动作按钮,需要具体场景具体分析。
使用Vue创建Modal组件
使用Vue-cli构建项目
在这里我使用Vue-cli来构建Vue的项目,对于Vue-cli在这里不做过多的阐述。通过:
vue init webpack vue-modal
然后一路按照命令提示执行下去。运行npm run dev
,你会先看到一个这样的界面:
创建modal组件
找到项目中的src/components/
目录,创建一个Modal.vue
文件。有了这个组件文件之后,咱们先从组件的模板开始。需要定义出Modal组件常见的几个部位:
<template>
<div class="modal-backdrop">
<div class="modal">
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</div>
</template>
注意,这里使用了Vue的slots
。这样我们就可以通过props
来提供Modal弹框的header
、body
和footer
。因为使用slots
可以有更多的灵活性。
使用slots
使用我们可以很轻易地重用不同类型的弹框内容。可以在Modal弹框显示一个简单的文本,但是我们可能希望重用相同的Modal弹框来提交一个请求。虽然props
一般情况下足够我们构建一个组件,但是通过props
会要求我们使用v-html
来渲染它。这样做一个不好的地方,很可能会受到XSS的攻击。
在这里,使用不同命名的slots
,可以让我们在一个组件中使用多个slots
。当定个一个指定的slots
时,我们所识别的任何名称都将被呈现,而不是原来的slots
。简单的理解,就把它看作是一个占位符。有点类似于input
中的placeholder
,如果不显式的给slots
指定内容,它也可以有默认的内容。
由于所提供的内容将会替换<slot>
标记,为了保证<slot>
对应的区域有我们想要的类名,最好用一个容器将每个<slot>
包裹起来。这个时候我们的模板变成这样:
<template>
<div class="modal-backdrop">
<div class="modal">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</template>
给slots
添加一点默认的值以及给容器设置一些初始的CSS样式,让其看起来像一个基本的Modal弹框:
<template>
<div class="modal-backdrop">
<div class="modal">
<div class="modal-header">
<slot name="header">
<h2>这是Modal弹框的标题</h2>
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-modal-component.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!