I want to know how to write pop-up components of vue a few days ago
There are two desirable writing methods:
1. State management If the pop-up component is placed in the root component, use vuex to manage the show and hide of the component. Put it in the component and control it by adding v-show or v-if. You can combine slot to define pop-up windows with different needs.
2. Event management Register a global event to open a pop-up window, pass in the text to be displayed and related logical control, and can be combined with promise to achieve asynchronous
I think it is better to use pop-up windows like confirme and propmt, which is more event-driven. It is best to use promise callbacks.
So I wrote one after itchy hands. Below is the code.
import Vue from 'vue'
import promptComponent from './' // Introduce pop-up vue fileconst promptConstructor = (promptComponent); // Register componentslet instance = new promptConstructor().$mount(''); // Get an example of the component
(instance.$el); // Insert the element of the component into the bodyconst Alert = (text,okText)=>{
if( === true) { //Prevent multiple triggers return;
}
// Assign values to pop-up data = true;
= true;
= okText||'Sure';
= text;
//Return a promise object and add event listening to the button return new Promise(function(resolve,reject) {
instance.$('click',function() {
= false;
resolve(true);
})
})
};
const Confirm = (text,okText,cancelText)=>{
if( === true) {
return;
}
= true;
= okText||'Sure';
= cancelText||'Cancel';
= text;
return new Promise(function(resolve,reject) {
instance.$('click',function() {
= false;
resolve(false);
});
instance.$('click',function() {
= false;
resolve(true);
})
})
};
const Prompt = (text,okText,inputType, defaultValue)=>{
if( === true) {
return;
}
= true;
= true;
= okText||'Sure';
= text;
= inputType || 'text';
= defaultValue || '';
return new Promise(function(resolve,reject) {
instance.$('click',function() {
= false;
resolve();
})
})
};
export {Alert,Confirm,Prompt}
<style lang="less" scoped>
.confirm-enter-active {
transition: all .2s;
}
.confirm-leave-active {
transition: opacity .2s;
}
.confirm-leave-to {
opacity: 0;
}
.confirm-enter {
opacity: 0;
}
.confirm {
position: relative;
font-family: PingFangSC-Regular;
font-size: 17px;
-webkit-user-select: none;
user-select: none;
// Mask layer style .masker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
-webkit-transition: opacity .1s linear;
transition: opacity .1s linear;
z-index: 100;
}
// Incorrect style of data entry .box {
position: absolute;
top: 50%;
left: 50%;
width: 72%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
border-radius: 12px;
background-color: #fff;
.message {
height: 97px;
line-height: 24px;
font-family: PingFangSC-Regular;
font-size: 17px;
vertical-align: middle;
color: #999;
letter-spacing: -0.41px;
p {
margin: 20px auto 0 auto;
vertical-align: middle;
}
&::after {
content: '';
height: 100%;
}
}
.prompt {
margin: 20px 0;
width: 100%;
p {
margin: 5px auto;
font-size: 17px;
line-height: 24px;
}
input {
margin: 5px auto;
border: 1px solid #333;
border-radius: 6px;
width: 100px;
height: 30px;
font-size: 14px;
line-height: 20px;
text-align: center;
}
}
.button-group {
a {
width: calc(50% - 0.5px);
text-align: center;
font-size: 17px;
line-height: 43px;
color: blue;
}
.max-width {
width: 100% !important;;
}
}
}
}
</style>
<template>
<transition name="confirm">
<div class="confirm" v-show="show">
<div class="masker" @>
<div class="box">
<div class="message" v-if="!isPrompt">
<p>{{message}}</p>
</div>
<div class="prompt" v-if="isPrompt">
<p>{{message}}</p>
<input type="text" v-model="inputValue" v-if="inputType === 'text'" ref="inputEl">
<input type="tel" ="inputValue" @keydown="enterCheck" v-if="inputType === 'tel'" ref="inputEl">
</div>
<div class="button-group clearfix bd-top">
<a class="bd-right fl" ref="cancelBtn" v-show="!isAlert && !isPrompt">{{cancelText}}</a>
<a class="fr" ref="okBtn" :class="{'max-width': isAlert || isPrompt}">{{okText}}</a>
</div>
</div>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import {mapState} from 'vuex'
export default{
data() {
return {
show: false,
message: 'Please enter a prompt',
okText: 'Sure',
cancelText: 'Cancel',
isAlert: false,
isPrompt: false,
inputValue: '',
inputType: ''
}
},
methods: {
// Check the amount input box enterCheck(event) {
// Only numbers are allowed to be entered, delete keys, and 11 digits if ( === 46 || === 8) {
return;
}
if ( < 47 || > 58 || === 190) {
= false;
}
},
},
watch: {
show(){
if () {
this.$nextTick(() => {
(this.$);
();
this.$();
});
}
}
}
}
</script>
import {Alert,Prompt,Confirm} from '../lib/components/prompt/'
= function(text,okText) {
return Alert(text,okText)
};
= function(text,okText,cancelText) {
return Confirm(text,okText,cancelText)
};
= function(text,okText,inputType, defaultValue) {
return Prompt(text,okText,inputType, defaultValue)
};
:
inputName() {
('Please enter a name','confirm','text').then(res =>{
// do something use res
});
},
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.