使用Vue组件实现一个简单弹窗效果_vue弹窗效果 - CSDN文库

Vue实现一个弹窗

145 浏览量更新于2023-03-16 评论收藏 146KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

使用使用Vue组件实现一个简单弹窗效果组件实现一个简单弹窗效果

主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方

式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下

最近在使用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">

<div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div>

<transition name="drop">

<div class="dialog-content" :style="{top:topDistance+'%',width:widNum+'%',left:leftSite+'%'}" v-if="isShow">

<div class="dialog_head back">

<slot name="header">提示信息</slot>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38631049

粉丝: 6
资源: 959

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈