使用Vue组件实现一个简单弹窗效果-创新互联

最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。

创新互联建站是一家专注网站建设、网络营销策划、小程序制作、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十载以来，已经为数千家宴会酒店设计各业的企业公司提供互联网服务。现在，服务的数千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式， props 、 $emit 传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

组件最后实现的效果

 

实现步骤

1. 先搭建组件的html和css样式，遮罩层和内容层。
2. 定制弹窗内容：弹窗组件通过 slot 插槽接受从父组件那里传过来弹窗内容。
3. 定制弹窗样式：弹窗组件通过 props 接收从父组件传过来的弹窗宽度，上下左右的位置。
4. 组件开关：通过父组件传进来的 props 控制组件的显示与隐藏，子组件关闭时通过事件 $emit 触发父组件改变值。
   

1.搭建组件的html和css样式。

html结构：一层遮罩层，一层内容层，内容层里面又有一个头部title和主体内容和一个关闭按钮。

下面是组件中的html结构，里面有一些后面才要加进去的东西，如果看不懂的话可以先跳过，

<template>
 <div class="dialog">
  <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
  <div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div>
  <!-- transition 这里可以加一些简单的动画效果 -->
  <transition name="drop">
   <!--style 通过props 控制内容的样式 -->
  <div class="dialog-content" : v-if="isShow">
   <div class="dialog_head back">
    <!--弹窗头部 title-->
    <slot name="header">提示信息</slot>
   </div>
   <div class="dialog_main" :>
   <!--弹窗的内容-->
   <slot name="main">弹窗内容</slot>
   </div>
   <!--弹窗关闭按钮-->
   <div class="foot_close" @click="closeMyself">
    <div class="close_img back"></div>
   </div>
  </div>
 </transition>
 </div>
</template>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：使用Vue组件实现一个简单弹窗效果-创新互联
网址分享：https://www.cdcxhl.com/article8/eship.html

成都网站建设公司_创新互联，为您提供自适应网站、响应式网站、外贸网站建设、定制网站、网站排名、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联