An introduction to how to develop pop-up modal box components in Vue.js

This article mainly introduces the sample code for the development of Vue.js pop-up modal box component. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

In the process of developing projects, it is often necessary to develop some pop-up box effects, but the native alert and confirm often fail to meet project requirements. This time when developing a reading WebApp based on Vue.js, there are a total of two places that need to be prompted. Because no other component libraries were introduced at the beginning, now I have to write a modal box component myself. At present, it is only an initial version that only meets the needs of the current project. Because this project is relatively simple, it does not retain many extended functions. This component still has a lot of room for expansion, and more custom content and styles can be added. Here we only introduce how to develop a modal box component. If you need more extensions, you can develop it yourself according to your own needs.

Component template

<template>
<p class="dialog">
 <p class="mask"></p>
 <p class="dialog-content">
  <h3 class="title">{{ modal.title }}</h3>
  <p class="text">{{ modal.text }}</p>
  <p class="btn-group">
   <p class="btn" @click="cancel">{{ modal.cancelButtonText }}</p>
   <p class="btn" @click="submit">{{ modal.confirmButtonText }}</p>
  </p>
 </p>
</p>
</template>

The modal box structure is divided into: header title, prompt content and operation area. At the same time, there is usually a mask layer. The requirements this time are relatively simple, and there is no need for icons and other content, so the structure is relatively simple. In actual development, the structure can be adjusted accordingly according to needs.

Component style

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

The style is relatively simple, so I won’t go into details.

Component interface

export default {
 name: 'dialog',
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: '',
   reject: '',
   promise: '', // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || '提示',
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve('submit');
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject('cancel');
  },
  //显示confirm弹出,并创建promise对象，给父组件调用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise对象,给父级组件调用
  }
 }

}

There are three methods defined in the modal box component, the core method is confirm , this method is provided to the parent component to call and returns a promise object. The main purpose of using promise objects is for asynchronous calls, because many times when we use modal boxes, we need to proceed to the next step based on the returned results.

Extension tips:

If you need to expand, you can pass more fields through the dialogOption of props and make judgments in computed. For example, adding a field isShowCancelButton can control Whether the cancel button is displayed. The same goes for other extensions.

Call

##

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
})

Source code address

Dialog component source code

implementation Effect

The above is the detailed content of An introduction to how to develop pop-up modal box components in Vue.js. For more information, please follow other related articles on the PHP Chinese website!