Detailed explanation of the steps to implement the modal dialog component in Vue

This time I will bring you a detailed explanation of the steps to implement the modal dialog component in vue. What are the precautions for the implementation of the modal dialog component in vue. The following is a practical case, let's take a look.

Written in front

Dialog box is a very commonly used component and is used in many places. Generally, we can use the built-in alert to pop up the dialog box, but What should we do if it is a designed diagram, so we need to write a dialog box ourselves, and if it is used in many places, then it is necessary for us to write it in a common component form and reference it between places where it is needed.

Now let’s implement a dialog component. According to the previous habit, let’s take a look at the implementation renderings

1. First, define a component through template

<template id="dialog">
    <p class="dialog">
      <p class="dialog_mask"></p>
      <p class="dialog_container">
        <p class="dialog_content">
          <p class="dialog_content_top">提示内容</p>
          <p class="dialog_btn">
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </p>
        </p>
      </p>
    </p>
  </template>

and add the corresponding dialog style

/*对话框style*/
    .dialog{
    }
    .dialog_mask{
      position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
    }
    .dialog_container{
        background: #fff;
  width: 300px;
  height: 120px;
  position: relative;
  border-radius: 10px;
  margin: 0 auto;
    }
    .dialog_content{
      text-align: center;
  padding-top: 30px;
    }
    .dialog_btn{
      margin-top: 20px;
    }
    .dialog_btn a{
      background: yellow;
        padding: 2px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
    width: 50px;
  display: inline-block;
    }
    .dialog_btn a:nth-child(2){
        margin-left: 20px;
    }

2. Use Vue.component to register a global Vue component , we call this component v-dialog, and then specify this component through template

Vue.component('v-dialog', {
      template: '#dialog',
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

3. Finally, reference this component through the v-dialog tag where we need it

<v-dialog></v-dialog>

The steps to create a vue component are roughly like this, but how should the parent component and child components communicate? Woolen cloth?

Here we mainly use props to transfer data to sub-components

Modify the above code as follows and add the props attribute

Vue.component('v-dialog', {
      template: '#dialog',
          props:['dialogShow','msg'],
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

You can see that we define prop through a string array In addition, we can also define props in the form of objects to specify validation rules for component props. If the type is wrong, there will be a warning in vue, where the value of type can be these ：String Number Boolean Function Object Array Symbol

props: {
    name: String,
    showDialog: {
      type: Boolean,
      default: false
    }
   }

In the component template, use v-if="showDialog" to determine whether to display or hide the dialog box, and use v-text=" msg"Bind the dialog box prompt content,

v-if="type==1" is used to determine the dialog box type and display the corresponding button. The code is as follows:

<template id="dialog">
    <p class="dialog" v-if="showDialog">
      <p class="dialog_mask"></p>
      <p class="dialog_container">
        <p class="dialog_content">
          <p class="dialog_content_top" v-text="msg">提示内容</p>
          <p class="dialog_btn">
            <a v-if="type==1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </p>
        </p>
      </p>
    </p>
  </template>

Add:show-dialog="showDialog" :msg="msg" :type="type" where the component is referenced, and pass their values ​​to the dialog component

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type"></v-dialog>

It should be noted that showDialog needs to be written in the form of show-dialog in the component, otherwise the data will not be obtained.

We define these attributes in the data

data: {
        msg:'',
        showDialog:false,
        type:1,// 提示类型 1单按钮提示框 2双按钮提示框
      },

Then, we add the button When clicking submit, the pop-up dialog box event is triggered

submit:function(){
          //弹出对话框组件
          if(!this.isLogin){//未登录
            this.msg = "请先去登录再领取金额";
            this.showDialog = !this.showDialog;
            this.type = 2;
            return;
          }
          if(this.amount){
            if(this.amount<1 || this.amount>1000){
              this.msg = "输入金额不能低于1元大于1000";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }else{
              this.msg = "领取成功，请在账户中心查看";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }
          }else{
            this.msg = "领取金额不能为空";
            this.showDialog = !this.showDialog;
              this.type = 1;
          }
        }

In this way, we can pop up the dialog box component and set different prompt messages through msg

So, how do we close this dialog box? , here it involves the child component needing to transmit information to the parent component

Mainly trigger parent class events through $emit, such as: this.$emit('close-dialog'); Then use v-on in the parent class to monitor the events triggered by the subclass, v-on:close-dialog="closeDialog", which can also be abbreviated as @close-dialog="closeDialog"

The code is as follows:

Add @close-dialog="closeDialog" in the v-dialog tag to listen for events triggered by sub-components

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>

Then define the closeDialog function to modify showDialog status                                                                                                                                                                                                                                                  It also needs to be noted that the listening function closeDialog needs to be written in the form of close-dialog

ok, above we have implemented a dialog component

I believe After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to implement full-screen scrolling plug-in in ES6

Summary of how to use nodejs log module winston

The above is the detailed content of Detailed explanation of the steps to implement the modal dialog component in Vue. For more information, please follow other related articles on the PHP Chinese website!