10.1登录成功提示、加载提示

制作登录成功提示

我们可以去vant找到

---

接下来的操作就是和之前一样
先去src/utils/vant.js导入

因为这个轻提示，整个项目都需要它，所以我们用全局引入的方式

如果想改成别的样式

加载提示

在网速很慢的情况下，用户可能会一直点击登录按钮，会频繁的向后台服务器发送请求，所以我们需要做一个加载提示

这个组件vant已经有了，并且还具备一个“禁用背景点击的功能”，也就是当这个加载面板出现的时候，是不能点击页面的，这样用户就点击不了登陆按钮，也就不能频繁的发送请求了

还有一种方法，就是在button按钮上加一个loading，也可以有登录中的样式

但是我们这个设置完之后,这个按钮就一直处于一种登录加载的状态
所以我们控制这个按钮，需要加载的时候才是这种状态
这个loading是一个布尔值，有true和false两种状态
我们这loading这个布尔值绑定一个isLoading值
之后我们通过操纵isLoading的值
去更改loading的值
从而达到按钮的两种状态的切换

但是这样会一直转圈，我们在下面之前写登录成功提示的下面写

this.isLoading = false

这样在提示登录成功后，按钮就不会转圈了

  methods: {
    async onSubmit() {
      this.isLoading = true//在网速慢的时候按钮会转圈
      let res = await loginAPI({
        mobile:this.info.mobile,
        code:this.info.code
      });
      console.log(res);

      
      // 全局方法引入
      this.$toast.success('成功登录');
      this.isLoading = false//提示登录成功后，按钮就不会转圈了
    },
  },