vue开发遇到一个需求,点击按钮打开弹层组件,在打开弹层之前需要调一个接口,根据接口返回的状态展示弹层的内容。
<popup :before-open="getInfoFun" :is-before-open="true"/>
getInfoFun() {
return new Promise((resolve, reject) => {
// ajax
getInfo().then((response) => {
const { code, data } = response;
if (code === "0") {
this.data = data
resolve(true);
}
})
.catch((error) => {
reject(false);
});
});
},
进入到弹层组件:
props: {
// 是否需要调用beforeOpen方法,false不调用
isBeforeOpen: {
type: Boolean,
default: false,
},
// 打开弹层之前是否需要调用异步方法
beforeOpen: {
type: Function,
required: false,
default: null
},
}
// 打开弹层之前的操作
async beforeOpenFun() {
// 打开弹层之前需要调接口
if (this.isBeforeOpen) {
// res:为boolean值,true/false
const res = await this.beforeOpen();
this.visible = res;
} else {
// 直接打开弹层
this.visible = true;
}
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。