Detailed explanation of the steps to implement the modal dialog component in Vue-JS Tutorial-php.cn

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>

Copy after login

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;
    }

Copy after login

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(){
      }
    })

Copy after login

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(){
      }
    })

Copy after login

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
    }
   }

Copy after login

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>

Copy after login

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>

Copy after login

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双按钮提示框
      },

Copy after login

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;
          }
        }

Copy after login

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>

Copy after login

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!