Vant Loading 是 Vant UI 组件库中的加载中组件,用于在 Vue.js 项目中实现加载状态的展示。以下是一个简单的例子,演示如何在 Vue 项目中使用 Vant Loading:

首先,确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装:
npm install vant
# 或者
yarn add vant

然后,在你的 Vue 项目中,可以这样使用 Vant Loading 组件:
<template>
  <div>
    <van-button @click="showLoading">显示 Loading</van-button>
  </div>
</template>

<script>
import { Loading } from 'vant';

export default {
  methods: {
    showLoading() {
      const loading = Loading({
        message: '加载中...', // 设置加载提示文本
        duration: 0, // 设置 duration 为 0,表示一直显示,直到手动关闭
      });

      // 模拟异步操作
      setTimeout(() => {
        loading.clear(); // 关闭 Loading
      }, 2000);
    },
  },
};
</script>

在这个例子中,我们使用了 Loading 函数,通过传递一些参数来配置 Loading 的行为。message 属性用于设置加载提示文本,duration 属性设置为 0 表示 Loading 一直显示,直到手动关闭。

你可以在异步操作开始时调用 Loading 函数显示 Loading,然后在异步操作完成后调用 loading.clear() 关闭 Loading。

确保在你的项目中正确引入了 Vant UI 组件库,并按照文档中的方式进行配置。这只是一个简单的例子,你可以根据实际需求进一步配置和定制 Vant Loading 组件。


转载请注明出处:http://www.zyzy.cn/article/detail/5671/Vant