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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用Vue组件实现一个简单弹窗效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6018字，纯文字阅读大概需要9分钟。

内容图文

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

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

组件最后实现的效果

使用Vue组件实现一个简单弹窗效果 - 文章图片

实现步骤

先搭建组件的html和css样式，遮罩层和内容层。
定制弹窗内容：弹窗组件通过 slot 插槽接受从父组件那里传过来弹窗内容。
定制弹窗样式：弹窗组件通过 props 接收从父组件传过来的弹窗宽度，上下左右的位置。
组件开关：通过父组件传进来的 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" :style="{top:topDistance+'%',width:widNum+'%',left:leftSite+'%'}" v-if="isShow">
   <div class="dialog_head back">
    <!--弹窗头部 title-->
    <slot name="header">提示信息</slot>
   </div>
   <div class="dialog_main" :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
   <!--弹窗的内容-->
   <slot name="main">弹窗内容</slot>
   </div>
   <!--弹窗关闭按钮-->
   <div class="foot_close" @click="closeMyself">
    <div class="close_img back"></div>
   </div>
  </div>
 </transition>
 </div>
</template>

下面是组件中的主要的css样式，里面都做了充分的注释，主要通过 z-index 和 background 达到遮罩的效果，具体内容的css可以根据自己的需求来设置。

<style lang="scss" scoped>
 // 最外层 设置position定位 
 .dialog {
 position: relative;
 color: #2e2c2d;
 font-size: 16px;
 }
 // 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
 .dialog-cover {
 background: rgba(0,0,0, 0.8);
 position: fixed;
 z-index: 200;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 // 内容层 z-index要比遮罩大，否则会被遮盖，
 .dialog-content{
 position: fixed;
 top: 35%;
 // 移动端使用felx布局 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 300;
 }
</style>

2. 通过 slot 定制弹窗内容

这一步，只要理解了 slot 的作用以及用法，就没有问题了。

单个插槽：

<slot>这是在没有slot传进来的时候，才显示的弹窗内容</slot>
上面是单个插槽也叫默认插槽，在父组件中使用插槽的正确姿势：

<my-component>
 <!--在my-component里面的所有内容片段都将插入到slot所在的DOM位置，并且会替换掉slot标签-->
 <!--这两个p标签，将替换整个slot标签里面的内容-->
 <p>这是一些初始内容</p>
 <p>这是更多的初始内容</p>
</my-component>

ps:如果子组件里面包含 slot 插槽，那么上面的p标签的内容将会被丢弃。

具名插槽：

所谓的具名插槽，即为 slot 标签赋一个 name 属性，具名插槽可以父组件中不同的内容片段放到子组件的不同地方，具名插槽还是可以拥有一个默认插槽。下面可以看一下弹窗组件插槽的使用方式：

<div class="dialog_head back ">
 <!--弹窗头部 title-->
 <slot name="header">提示信息</slot>
 </div>
 <div class="dialog_main " :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
 <!--弹窗的内容-->
 <slot name="main">弹窗内容</slot>
 </div>

在父组件中的使用方式：

将弹窗组件引入要使用的组件中，并通过 components 注册成为组件。
父组件中弹窗组件插槽的使用方法如下。

<dialogComponent>

 <div slot="header">插入到name为header的slot标签里面</div>
  <div class="dialog_publish_main" slot="main">
  这里是内容插入到子组件的slot的name为main里面，可以在父组件中添加class定义样式，事件类型等各种操作
  </div>
</dialogComponent>

关于组件中用到的插槽的介绍就到这里了，插槽在弹窗组件中的应用是一个典型的栗子，可以看到插槽作用相当强大，而插槽本身的使用并不难，同学们爱上插槽了没有？

3.通过 props 控制弹窗显隐&&定制弹窗style

psops 是Vue中父组件向子组件传递数据的一种方式，不熟悉的小伙伴们可以看一下 props文档。

因为弹窗组件都是引到别的组件里面去用的，为了适合不同组件场景中的弹窗，所以弹窗组件必须具备一定的可定制性，否则这样的组件将毫无意义,下面介绍一下props的使用方式，以弹窗组件为例：

首先需要在被传入的组件中定义props的一些特性，验证之类的。
然后在父组件中绑定props数据。

<script>
export default {
 props: {
 isShow: { 
 //弹窗组件是否显示 默认不显示
  type: Boolean,
  default: false,
  required:true, //必须
 },
 //下面这些属性会绑定到div上面 详情参照上面的html结构
 // 如： :style="{top:topDistance+'%',width:widNum+'%'}"
 widNum:{ 
 //内容宽度
  type: Number,
  default:86.5
 },
 leftSite:{
  // 左定位
  type: Number,
  default:6.5
 },
 topDistance: {
  //top上边距
  type: Number,
  default:35
 },
 pdt:{
  //上padding
  type: Number,
  default:22
 },
 pdb:{
  //下padding
  type: Number,
  default:47
 }
 },
}
</script>

父组件中使用方式：

<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum">
</dialogComponent>

ps：props传递数据不是双向绑定的，而是单向数据流，父组件的数据变化时，也会传递到子组件中，这就意外着我们不应该在子组件中修改props。所以我们在关闭弹窗的时候就需要通过 $emit 来修改父组件的数据，然后数据会自动传到子组件中。

现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。

4. $emit 触发父组件事件修改数据，关闭弹窗

Vue中在子组件往父组件传参，很多都是通过 $emit 来触发父组件的事件来修改数据。

在子组件中，在点击关闭，或者遮罩层的时候触发下面这个方法：

methods: {
 closeMyself() {
  this.$emit("on-close"); 
  //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
 }
 }

父组件中的写法：

<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum" @on-close="closeDialog"> 
 </dialogComponent>
 //"on-close是监听子组件的时间有没有触发，触发的时候执行closeDialog函数
methods:{
 closeDialog(){
 // this.status.isShowPublish=false;
 //把绑定的弹窗数组 设为false即可关闭弹窗
 },
}

可以用弹窗组件实现下列这种信息展示，或者事件交互：

使用Vue组件实现一个简单弹窗效果 - 文章图片

弹窗组件代码

上面是把弹窗的每个步骤拆分开来，一步步解析的，每一步都说的比较清楚了，具体连起来的话，可以看看代码，再结合文章就能理的很清楚了。

总结

以上所述是小编给大家介绍的使用Vue组件实现一个简单弹窗效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的使用Vue组件实现一个简单弹窗效果全部内容，希望文章能够帮你解决使用Vue组件实现一个简单弹窗效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/337558.html

来源：【匿名】

【上一篇】vue组件实现弹出框点击显示隐藏效果【下一篇】php怎么返回数据给vue

更多 ►

【使用Vue组件实现一个简单弹窗效果】教程文章相关的互联网学习教程文章

一、子父组件1、子组件获得父组件中的值：通过v-bind方式绑定在子组件中// 子组件中定义propsprops: [‘msg‘]// 父组件中： <deleteBar :msg=‘this.xx‘ :name=‘this.yy‘></deleteBar> //在以html元素方式插入子组件的位置，用:msg的方式绑定已经在子组件中定义的参数，=‘this.xx‘引用父组件中的值2、子组件中调用父组件中的方法1> 绑定在子组件定义的元素位置，在子组件中用emit方法触发，与传递值的方法相似// 子组件： //...

vue组件通信（props,$emit,$attrs,$listeners）【代码】

朝颜陌 vue基础----组件通信（props,$emit,$attrs,$listeners）一、父传子，子传孙　　1. props　　　　1>在父组件中通过子组件自定义的标签属性来传递数据。　　　　2>在子组件中通过props声明希望用到的数据 1 <body>2 <div id="app">3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>4 </div>5 <script src="./node_modules/vue/dist/vue.js"></script>6 <script>7 let vm =...

vue组件通信

第一种：props，$emit用于在父子组件之间进行传值，通信第二种：vuex父子组件，兄弟组件等组件之间的通信都可以使用第三种：$root.$on , $root.$emit深层组件嵌套时候可以使用另外还有好几种通信方式，我只记录我使用过的这几种原文：https://www.cnblogs.com/sixrookie/p/13091797.html

Vue 组件与复用【代码】

（1）全局注册<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><title>Vue</title></head><body><div id="app"><my-component></my-component></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">//示例前注册 Vue.component(‘my-component‘, {//DOM结构必须被元素包含 template: ‘<div>组件内容</div>‘})new Vue({el: "#ap...

vue组件提取--SvgIcon组件【代码】

SvgIcon组件主要是整站所有的图标icon，提前成一个单独的组件。假如Nav.vue需要该组件，引用即可。由此可见，需要将SvgIcon.vue组件注册为全局组件，谁需要，谁引用。一、将SvgIcon.vue注册为全局组件、1、注册组件//SvgIcon是组件名 { }里边是组件内容 Vue.component(‘SvgIcon‘,{template:`<div>我是SvgIcon组件</div>`,data(){return {msg:‘hello‘}} }) 因此，可将组件内容抽离出来单独的文件---SvgIcon.vue2、抽离SvgIcon....

vue 组件之纯表格渲染--没有事件交互【代码】【图】

组件名称小写==》用-链接02===> 属性==> empty-text="暂无数据" 当表格中没有数据就会显示暂无数据<el-table-column v-for="item in tabColumn":key="item.prop":prop="item.prop":label="item.label":width="item.width":align="item.align"empty-text="暂无数据"></el-table-column>03==> :align="item.align" 是居中的方式有 left center right 组件.vue<template><el-table :data="tableData" stripe style="width: ...

Vue组件中的问题【图】

错误信息：提示信息含义：组件模板中只能包含一个根元素解决办法：在模板元素内部增加块级元素div将这些元素标签包裹起来，如图所示原文：https://www.cnblogs.com/laoniaofly/p/8974218.html

初步了解vue的组件【图】

compoent引入组件1.先写好子组件x.vue，需要从父组件传变量到子组件；在子组件里写：props：[‘xx‘]；为变量，用法{{xx}}即可；2.在全局样式里引用组件import X from ‘./components/x.vue‘;Vue.compoent(‘X‘,X);3.在你需要引用的vue页面里引用组件即可，如<x xx="sss"></x>就好原文：https://www.cnblogs.com/ssszjh/p/9563260.html

vue组件获取和vue-cli的基本了解【代码】【图】

Vue获取组件的一些方法this.$refs.xxx给标签绑定ref属性，获取的是当前DOM对象给组件绑定ref属性，获取的是组件实例对象this.$parent获取当前组件的父组件,为一个对象this.$root获取当前组件的根组件,为一个对象this.$children获取当前组件的子组件,为一个数组vue-cli(vue脚手架)的使用1.安装npm install -g @vue/cli //必须先安装了node.js -g表示全局环境 vue -V // 可查看当前vue-cli的版本 2.创建项目Vue CLI >= 3 和旧版使用...

全局定义vue组件

1.什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：2.组件化与模块化模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用3.组件定义方式全局定义 ①使用Vue.extend配合Vue.copmpone...

Vue组件之全局组件与局部组件【代码】

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。全局组件注册方式：Vue.component(组件名,{方法})eg:<body> <div id="app"> <my-component></my-component> </div> <div id="app1"><my-component><...

vue组件，路由及组件跳转，

-组件的使用  -路由及组件跳转<!--1、安装并保存npm install vue-router --save2、在main.js里引入并使用import VueRouter from ‘vue-router‘Vue.use(VueRouter)3、在main.js里路由配置 1.创建组件引入组件 import Router from "./components/06...

Vue组件化开发（二）【代码】【图】

Vue组件化开发（二）Vue之传递数据父组件把数据传递给子组件可以通过props属性，来将父组件的数据传递给子组件，传递数据的三个步骤：step 1:在父组件中调用子组件，在组名处，使用给标签属性赋值的方式往下传递数据<template><div id="father"><son :mynum="father_num" title="我是father组件的num"></son></div> </template># 上面表示父组件father在调用子组件son子组件的时候，一共传递了两个参数如果传递的数据是一个变量，...

JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）【代码】【图】

阅读目录一、为什么组件很重要二、Vue里面的组件基础知识1、组件的概念2、组件原理3、组件使用三、封装自己的Component1、使用Component封装bootstrapTable2、封装select3、查看其他Vue框架源码四、总结正文前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这...

vue组件【代码】

在vue中通过切换不同的组件来达到页面的切换在组件分为三个部分第一个部分：<template></template>这一部分是用来写关于HTML的代码的，而且只能有一个根元素错误的写法：<template><div></div><div></div> </template>这里就有两个跟元素div，是错误的写法。正确的写法：<template>　　<div class="father">　　　　<div class="son"></div>　　　　<div class="son"></div>　　</div></template> 第二部分：<script></script>结构...

首页 / VUE / 使用Vue组件实现一个简单弹窗效果

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【使用Vue组件实现一个简单弹窗效果】教程文章相关的互联网学习教程文章

vue组件传值 | 子父组件【代码】

vue组件通信（props,$emit,$attrs,$listeners）【代码】

vue组件通信

Vue 组件与复用【代码】

vue组件提取--SvgIcon组件【代码】

vue 组件之纯表格渲染--没有事件交互【代码】【图】

Vue组件中的问题【图】

初步了解vue的组件【图】

vue组件获取和vue-cli的基本了解【代码】【图】

全局定义vue组件

Vue组件之全局组件与局部组件【代码】

vue组件，路由及组件跳转，

Vue组件化开发（二）【代码】【图】

JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）【代码】【图】

vue组件【代码】

VUE - 相关标签

组件 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程