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;
      }
    },

我的一个道姑朋友
80 声望4 粉丝

星光不问赶路人,岁月不负有心人。