search
HomeWeb Front-endJS TutorialVue makes pop-up window function (with code)

This time I will bring you the pop-up function of Vue (with code). What are the precautions for making the pop-up function of Vue? The following is a practical case, let’s take a look.

Recently When using the element-ui framework, I used the Dialog dialog component. The effect achieved was roughly the same as a pop-up component I made in my previous mobile project. Then I thought about using this pop-up component Let me share with you the implementation method. The following article will guide you through the implementation of a pop-up window component.

The main content of this article will involve the implementation of the pop-up window mask, the use of slot slots, props, $emit passes the parameters, and the specific component code is also uploaded. If you like it, you can like/follow and support it. I hope everyone can gain something from reading this article.

Component last Achieved effect

Implementation steps

  1. First build the html and css style, mask layer and content layer.

  2. Customized pop-up content: The pop-up component accepts the pop-up content passed from the parent component through the slot.

  3. Customized pop-up window style: The pop-up window component receives the pop-up window width, up, down, left and right positions passed from the parent component through props.

  4. Component switch: through the parent component The props passed in from the component control the display and hiding of the component. When the child component is closed, the event $emit triggers the parent component to change the value.

1. Build the html and css styles of the component.

html structure: a mask layer, a content layer, and the content layer has a header title, body content and a close button.

The following is the html structure in the component, inside There are some things that will be added later. If you don’t understand, you can skip it first.

<template>
 <p>
  <!--外层的遮罩 点击事件用来关闭弹窗,isShow控制弹窗显示 隐藏的props-->
  </p>
<p></p>
  <!-- transition 这里可以加一些简单的动画效果 -->
  <transition>
   <!--style 通过props 控制内容的样式 -->
  <p>
   </p>
<p>
    <!--弹窗头部 title-->
    <slot>提示信息</slot>
   </p>
   <p>
   <!--弹窗的内容-->
   <slot>弹窗内容</slot>
   </p>
   <!--弹窗关闭按钮-->
   <p>
    </p>
<p></p>
   
  
 </transition>
 
</template>

The following are the main css styles in the component, which are fully commented, mainly through z-index and background to achieve a masking effect. The css of the specific content can be set according to your own needs.

<style>
 // 最外层 设置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. Customize the pop-up content through slot

In this step, as long as you understand the role of slot and usage, there will be no problem.

Single slot:

This is the pop-up content that is displayed when no slot is passed in
The above is a single slot, also called the default slot. The correct posture for using the slot in the parent component:

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

ps: If the child component contains a slot slot, then the content of the p tag above will will be discarded.

Named slot:

The so-called named slot is to assign a name attribute to the slot tag. The named slot can place different content fragments in the parent component into the child component. Different places, named slots can still have a default slot. Below you can take a look at how the pop-up component slot is used:

<p>
 <!--弹窗头部 title-->
 <slot>提示信息</slot>
 </p>
 <p>
 <!--弹窗的内容-->
 <slot>弹窗内容</slot>
 </p>

How to use it in the parent component:

Introduce the pop-up component into the component to be used, and register it through components components.
The method of using the pop-up component slot in the parent component is as follows.

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

That’s it for the introduction of slots used in components. The application of slots in pop-up components is a typical example. You can see that the slots are quite powerful, and the slots themselves It is not difficult to use. Have students fallen in love with slots?

3. Use props to control pop-up window visibility && customize pop-up window style

psops is a way for parent components in Vue to transfer data to sub-components. Friends who are not familiar with it can check it out Check out the props document.

Because pop-up components are introduced into other components, in order to be suitable for pop-ups in different component scenarios, pop-up components must have a certain degree of customizability, otherwise such components will not be able to be used at all. Meaningless, let's introduce how to use props, taking the pop-up component as an example:

First, you need to define some characteristics of props in the passed-in component, such as verification.
Then bind the props data in the parent component.

<script>
export default {
 props: {
 isShow: { 
 //弹窗组件是否显示 默认不显示
  type: Boolean,
  default: false,
  required:true, //必须
 },
 //下面这些属性会绑定到p上面 详情参照上面的html结构
 // 如: :style="{top:topDistance+&#39;%&#39;,width:widNum+&#39;%&#39;}"
 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>

How to use it in the parent component:

<dialogcomponent>
</dialogcomponent>

ps: The data passed by props is not two-way bound, but one-way data flow. When the data of the parent component changes, it will also be passed to the child. In components, this means that we should not modify props in child components. So when we close the pop-up window, we need to use $emit to modify the data of the parent component, and then the data will be automatically passed to the child component.

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

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

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

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

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

父组件中的写法:

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

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

 

弹窗组件代码

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

使用beforeEnter钩子函数(附代码)

react应用开发脚手架使用案例

The above is the detailed content of Vue makes pop-up window function (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software