移动端项目登录提交loading效果实现

一、命令行下载npm i element-ui -S,在main.js中引入

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

二、在函数中调用

    async AjaxImsert() {
     // 开启loading效果
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let rulg = /^[a-zA-Z0-9]{6,10}$/;
      if (rulg.test(this.model.username) && rulg.test(this.model.password)) {
        const { data: res } = await this.$http.post("/login", this.model);

        console.log(res);
        if (res.code == 301 || res.code == 302) {
          return;
        }
        localStorage.setItem("id", res.id);
        localStorage.setItem("token", res.token);
        setTimeout(() => {
          // 关闭loading效果
          loading.close();
          this.$msg.fail(res.msg);

          this.$router.push("/userinfo");
        }, 1000);
      } else {
        this.$msg.fail("格式不正确，重新输入");
      }
    }