this.$message.loading() 用法示例

`this.$message.loading()` 方法用于显示一个加载中的提示框，通常用于异步操作中的等待提示。该方法的用法示例如下：

// 显示加载中提示框
this.$message.loading({
  message: '加载中...',   // 提示文本
  duration: 0            // 显示时间，0 表示不会自动关闭
});

// 隐藏加载中提示框
this.$message.close();

在调用 `loading` 方法时，可以传入一个对象作为参数，该对象支持以下属性：

- `message`：提示文本，类型为字符串，默认为空字符串
- `duration`：显示时间，类型为数字，单位为毫秒，默认值为3000，表示 3 秒后自动关闭，0 表示不会自动关闭

在加载完成后，需要调用 `this.$message.close()` 方法来关闭加载中提示框。

相关问题

this.$confirm加loading

在Vue中，可以使用`this.$confirm`方法实现确认框效果，并且结合loading显示加载状态。在引用中的代码中，可以看到在`beforeClose`方法中，通过设置`ctx.confirmButtonLoading = true`来开启loading效果，表示数据正在加载中。在使用loading的地方，一般是在异步请求的回调函数内，即请求发送后，根据接口返回的结果来决定是否关闭loading。

示例代码如下：

this.$confirm('是否确定删除选中的数据?', '警告', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  callback: () => {},
  beforeClose: (action, ctx, close) => {
    if (action !== 'confirm') {
      close();
      return;
    }
    ctx.confirmButtonLoading = true; // 开启loading效果

    // 在这里执行异步请求，例如发送删除数据的接口请求
    // 假设导入的接口文件为import Api from '@/api/project';
    // Api.接口名称(data).then((res) => {
    //   if (res.code == 200) {
    //     this.$successMessage("删除成功");
    //     this.loadData(); // 重新加载数据
    //     close(); // 关闭确认框
    //   }
    // }).finally(() => {
    //   ctx.confirmButtonLoading = false; // 关闭loading效果
    // });
  }
}).finally(() => {});

通过以上代码，当点击确认按钮后，会触发`beforeClose`方法，然后执行异步请求，期间`ctx.confirmButtonLoading`会被设置为`true`，显示loading效果。当请求结束后，无论成功与否，都会执行`finally`方法，将`ctx.confirmButtonLoading`设置为`false`，关闭loading效果。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [vue写的confirm确认框，loading加载中，message提示消息](https://download.csdn.net/download/hsl_1990_08_15/10832364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [给elementUI中的 this.$confirm 添加按钮的加载效果](https://blog.csdn.net/weixin_45990765/article/details/124632557)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { // console.log('123123123123') this.loading = true this.$store .dispatch('user/login', this.loginForm) .then(() => { getDic({}).then(res => { if (res.code === 0) { if (this.loginForm.password === '123456') { this.$alert( '<strong>该密码为初始密码，建议及时修改</strong>', '提示', { dangerouslyUseHTMLString: true } ) } } // console.log(2222222222, res.data) localStorage.setItem('dictMsg', JSON.stringify(res.data)) this.$router.push({ // path: this.redirect || '/' path: '/' }) this.loading = false }) }) .catch(() => { this.loading = false }) } else { console.log('error submit!!') return false } }) }

这段代码是一个登录表单的提交函数，其中使用了Vue.js框架的`$refs`、`$store`和`$router`等API。

首先，它调用了`this.$refs.loginForm.validate()`方法，这是一个基于Vue.js的表单验证插件`vee-validate`提供的方法，用于对表单进行验证。`valid`参数是验证结果，如果验证通过则为`true`，否则为`false`。

如果表单验证通过，就会调用`this.$store.dispatch('user/login', this.loginForm)`方法，这是一个`action`，用于调用后端接口进行登录验证。如果登录验证成功，就会调用`getDic()`方法获取字典信息，并将其保存到本地存储中（使用`localStorage.setItem()`方法）。如果登录密码为初始密码，就会弹出一个提示框，提醒用户修改密码。最后，调用`this.$router.push()`方法跳转到首页。

如果表单验证不通过，就会返回`false`，并打印一条错误信息。

以下是一个简化版的示例，假设我们有一个名为`LoginForm`的组件，其中包含一个名为`loginForm`的对象，用于存储登录表单的数据：

<template>
  <form ref="loginForm" @submit.prevent="handleLogin">
    <label for="username">Username</label>
    <input id="username" v-model="loginForm.username" required>
    <label for="password">Password</label>
    <input id="password" v-model="loginForm.password" type="password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 表单验证通过，调用登录接口
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              // 登录成功，获取字典信息并保存到本地
              getDic({}).then(res => {
                localStorage.setItem('dictMsg', JSON.stringify(res.data))
                // 如果密码为初始密码，弹出提示框
                if (this.loginForm.password === '123456') {
                  this.$alert(
                    '<strong>该密码为初始密码，建议及时修改</strong>',
                    '提示', {
                      dangerouslyUseHTMLString: true
                    }
                  )
                }
                // 跳转到首页
                this.$router.push('/')
              })
            })
            .catch(() => {
              // 登录失败，提示用户
              this.$message.error('登录失败')
            })
        } else {
          // 表单验证不通过
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

这个示例中，我们使用了`vee-validate`插件对表单进行了验证，并在表单验证通过后调用了`this.$store.dispatch('user/login', this.loginForm)`方法进行登录验证。如果登录验证成功，就会调用`getDic()`方法获取字典信息，并将其保存到本地存储中。如果登录密码为初始密码，就会弹出一个提示框，提醒用户修改密码。最后，调用`this.$router.push()`方法跳转到首页。