Preface
Recently, I have studied the components that use vue to write pop-up boxes and found that there are actually many ways to do it. This article is entirely used to record and summarize recent learning achievements, and also hopes to help you who are struggling with your studies~ps: This article assumes that you already understand the relevant framework of vue2.0, so it is suitable for students with a certain foundation in vue2.0.
Thinking about designing components
In fact, it is not difficult to simply write a pop-up component. Write a template and then use the v-if or v-show instructions to control the appearance and disappearance of the component. What really bothers me is the way this component is called. This problem has been tangled with me for a long time.
After researching the information, some people suggested that the component label be inserted directly into the template, and then the component is controlled by directly controlling the component's display and hiding. There is an advantage in writing this way, that is, the structure is clear and clear at a glance. When people look at your code, they will know that there may be pop-ups on your page, and the components written are easier. Just focus on the internal methods, and there is no problem with event calls, and it is particularly easy to maintain. However, the disadvantages are also obvious. If there are multiple pop-up windows and you don’t know how many pop-up windows will be, it will not be easy to do. In addition, this form of writing templates in advance will inevitably require downloading some js files when there is no pop-up window, which may cause performance waste.
Some people also suggest that a layer of encapsulation be made outside the written pop-up component, and the display and hiding of the pop-up box is controlled through dynamic calls. The advantage of writing this way is that you don’t need to write the label of the component in the template in advance. You just need to call the component where you want to call it, which achieves the purpose of using it on demand, which is in line with the coding habits of the previous traditional front-end framework. The disadvantage is that the code is more complicated to write, nested layer by layer, and it feels that this is contrary to the idea of the state-driven interface of the MVVM mode.
So I, Libra, became confused and thought about which technical solution to choose for a long time. However, I searched a lot on the Internet and found that the latter method is still used by many people. Later I studied the pop-up box components of elementUI and iView. They also used the latter method and thought about the latter method. Although the code is not readable, it truly simulates the browser's default alert event and calls it where the user needs it. On the one hand, it saves the amount of code, and on the other hand, it is easy to solve the situation of multiple pop-ups. Finally, I decided to write a simple pop-up component in this pattern. Mainly to understand the mechanism. Without further ado, I'm here to get some real information. If you have any wrong things, please give me some advice. (ps: For Libra, although I chose the latter method, I still love the first method in my heart, and the latter method does not have enough reason to convince me. I don’t know which knowledgeable person can help me wake me up. I am grateful).
alert component design
The logic of designing the alert pop-up box alone is very simple, so I just uploaded the code:
<template>
<transition name='fade'>
<div class="alert" v-if="showAlert">
<div class="wrap">
<div class="head">{{title}}</div>
<div class="body">
<slot>
<p>{{message}}</p>
</slot>
</div>
<div class="foot">
<div v-if="type === 'confirm'">
<button class="btn-base" @click="sure">Sure</button>
<button class="btn-gray" @click="cancel">Cancel</button>
</div>
<div v-else-if="type === 'inform'">
<button class="btn-base" @click="cancel">knew</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'alert',
data() {
return {
showAlert: false,
};
},
props: {
title: {
type: String,
default: 'hint',
},
message: {
type: String,
},
type: { // There can be two types: confirm, inform and inform type: String,
default: 'confirm',
validator(value) {
return value === 'confirm' || value === 'inform';
},
},
sureBtn: {
type: Function,
},
cancelBtn: {
type: Function,
},
context: {
type: Object,
},
},
methods: {
cancel() {
if () {
();
}
();
},
sure() {
if () {
();
}
();
},
show() {
= true;
},
close() {
= false;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.alert {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, 0.8);
z-index: 1000;
transition: all .3s ease-in-out;
}
.wrap {
position: absolute;
z-index: 1002;
min-width: 400px;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 4px;
}
.head {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #dedede;
padding-left: 10px;
color: #333;
}
.body {
padding: 40px 20px;
text-align: center;
}
.foot {
height: 50px;
text-align: center;
button {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
}
</style>
I only wrote simple functions here, and did not consider more complex situations, such as button color customization, size customization, z-index level considerations, unified management of masking layers, etc., just to master the main idea of writing pop-up boxes, so I did not write too much. Here we only subdivided whether it is a confirmation box or a notification box. You can customize some simple and regular operations such as the content and title of the pop-up box.
In fact, after writing this component, you can use it on the page. You can directly insert this section on the corresponding page. You can or can use it:
<!--template-->
<button @click="showAlert">Click me</button>
<alert ref="alert">I'm a confirmation box</alert>
<!--javascript-->
...
methods: {
showAlert() {
this.$();
}
}
...
Of course, if you really want to use this, this component still needs to modify something, such as event throwing. When clicking the OK or Cancel button, you need to emit the corresponding event to provide it to the parent component to capture and handle it accordingly.
Dynamically insert into the page
In order to allow components to be inserted dynamically into the page, the above components need to be encapsulated. Using the mechanism, this encapsulation can be easily achieved, and the code is directly added:
import Vue from 'vue';
import alert from './alert';
const AlertConstructor = (alert);
const div = ('div');
= (options) => {
(div);
= 'inform';
const propsData = ({}, options);
const alertInstance = new AlertConstructor({
propsData,
}).$mount(div);
();
};
= (options) => {
(div);
= 'confirm';
const propsData = ({}, options);
const alertInstance = new AlertConstructor({
propsData,
}).$mount(div);
();
};
export default AlertConstructor;
Here, show corresponds to notification box, confirm corresponds to confirm box. I know that this kind of packaging is a bit simple, and there are many situations that have not been considered, such as the processing when there are multiple pop-up boxes. This is just a simple packaging to let everyone understand what the main idea of this packaging is.
Summarize
This article is just a brief summary and thought about my problem of exploring the pop-up component in the past few days. Maybe it’s not very mature yet, so let’s take it as a throw-in and you are welcome to give more opinions. I hope it will be helpful to everyone's learning and I hope everyone will support me more.