Vue 2.0学习笔记:使用Vue创建Modal组件

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Modal弹框在Web应用或者Web页面上非常常见,很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让其能在各个Web页面或者应用上使用。在这篇文章中,学习一下如何使用transitionslots来创建可重用的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弹框的headerbodyfooter。因为使用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>
           
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-modal-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部