首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 Loading 组件：
<template>
<div>
<!-- 点击按钮触发加载效果 -->
<van-button @click="showLoading">显示加载</van-button>
<!-- 使用 vant-loading 组件控制加载状态 -->
<van-loading v-model="loading" />
<!-- 这里放置其他页面内容 -->
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式变量，用于控制加载状态
const loading = ref(false);
// 点击按钮时，显示加载效果
const showLoading = () => {
loading.value = true;
// 模拟加载过程，实际中可根据需要执行异步操作
setTimeout(() => {
// 加载完成后隐藏加载效果
loading.value = false;
}, 2000);
};
return {
loading,
showLoading,
};
},
};
</script>
在这个例子中，我们使用了 van-button 组件来触发加载效果，而加载效果本身则由 van-loading 组件控制。在 setup 函数中，通过 ref 创建了一个响应式变量 loading，用于控制加载状态的显示和隐藏。点击按钮时，loading 的值变为 true，显示加载效果，然后通过 setTimeout 模拟加载过程，2 秒后将 loading 的值再次设置为 false，隐藏加载效果。
这只是一个简单的示例，你可以根据实际需求进行更复杂的加载操作。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5821/Vant