最近在写项目的时候需要“在vue中动态生成一个弹出层”，查找资料的时候偶然发现了一个关于Promise的用法，如下：
showPopupFrame(){
this.showPopupFrameBtnDisable = true
this.$loginFrame().then(res=>{
// resolve时执行
console.log(res)
}).catch(err=>{
// reject时执行
console.log(err)
}).finally(()=>{
// 无论结果如何都执行
this.showPopupFrameBtnDisable = false
})
}
生成组件以后，调用组件的地方可以监听组件动向，并根据此做出不同的操作，非常适用于各种需要交互的弹窗
一、 Promise
Promise是在es6(ECMAScript 6.0)中的新特性，它是异步编程的一种解决方案。基本使用方法如下：
// 定义一个Promise对象
const wait = ms => {
return new Promise((resolve,reject)=>{
if(ms>10000){
// 如果ms大于10000则提交错误，执行catch
reject(ms+'毫秒太多了！')
}else{
// 否则执行then
setTimeout(()=>{resolve(ms+'毫秒过去了...')},ms)
}
})
}
// 执行catch
wait(15000).then((res)=>{
console.log('then')
console.log(res)
}).catch((err)=>{
console.log('catch')
console.log(err)
})
// 执行then
wait(2000).then((res)=>{
console.log('then')
console.log(res)
}).catch((err)=>{
console.log('catch')
console.log(err)
})
二、Vue动态加载组件
先定义好template.vue前端文件，然后在一个js文件中封装一些方法将它实例化为Vue.Component，就可以进行动态加载了。
三、demo
点击按钮，出现弹出层，同时将按钮禁用
demo-弹出框示意
输入数据，点击提交，触发提交事件，同时调用组件的方法也接收到了数据
demo-提交示意
点击取消
demo-取消示意
四、简要实现
组件代码
// component/dialog/login.vue
<template>
<div class="login-frame">
<div class="login-form">
<label>
账号：<input v-model="account" type="text" placeholder="用户名">
</label><br/>
<label>
密码：<input v-model="pwd" type="password">
</label><br/>
<button @click="cancel">取消</button>
<button @click="submit">提交</button>
</div>
</div>
</template>
<script>
export default {
name: "login.vue",
data(){
return {
account:'',
pwd:''
}
},
methods:{
cancel(){
console.log('点击了取消')
//取消登录 执行fail
this.$emit('fail')
this.destroy()
},
submit(){
console.log('点击了登录')
//提交登录 执行success
this.$emit('success',{
account:this.account,
password:this.pwd
})
this.destroy()
},
show(){
document.body.append(this.$el)
},
destroy(){
// 从页面移除
if (document.body.contains(this.$el)){
document.body.removeChild(this.$el)
}
}
}
}
</script>
<style scoped>
.login-frame{
position: fixed;
top: 180px;
width: 100%;
margin: 0;
padding: 0;
}
.login-form{
width: 200px;
margin: 0 auto;
border: 1px solid red;
background: #eee;
}
</style>
组件封装代码
// component/dialog/loginFrame.js
import vue from 'vue'
import loginComponent from './login'
// 生成构造方法
const loginConstructor = vue.extend(loginComponent)
let loginDom = null
const login = () => {
if (loginDom!==null){
loginDom.destroy()
loginDom = null
}
// 创建
loginDom = new loginConstructor({
el:document.createElement('div')
})
// 附加到页面
loginDom.show()
return new Promise((resolve,reject) => {
// 若login.vue执行success
loginDom.$on('success',(form)=>{
resolve(form)
})
// 若login.vue执行fail
loginDom.$on('fail',()=>{
reject('用户取消登录')
})
})
}
export default login
在main.js中定义
import loginFrame from "@/components/dialog/loginFrame"
Vue.prototype.$loginFrame = loginFrame
如有错误，欢迎指出，谢谢
