uview-ui 1.0 怎么使用loading

UView UI 是一套轻量级的 Vue 组件库，v1.0 版本中也包含了丰富的 UI 功能，包括 loading 动画。要在 UView UI v1.0 中使用 loading 动画，你可以按照以下步骤操作：

1. 首先，在项目中安装 UView UI 的依赖：

   npm install uview-ui --save
   # 或者如果使用 yarn，则运行
   yarn add uview-ui

2. 引入所需的 loading 组件到组件文件中。通常会导入 `u-loading` 组件：

   <script setup>
   import { uLoading } from 'uview-ui';
   </script>

   <template>
     <u-loading :visible="isLoading" />
   </template>

或者在 CSS 文件中引入相应的样式。

3. 定义一个布尔变量 `isLoading` 来控制 loading 显示与否，例如在需要展示加载状态的地方：

   <template>
     <button @click="showLoading">点击显示加载</button>
     <u-loading ref="loading" :visible="isLoading" />
   </template>

   <script setup>
   const showLoading = () => {
     // 当你需要加载数据时，将 isLoading 设置为 true
     // 加载完毕后再将其设置回 false
     setIsLoading(true);
     // ... (处理异步请求)
     setIsLoading(false);
   };
   
   let isLoading = ref(false); // 使用 uview-ref 访问
   const setIsLoading = isLoading.value = true; // 控制 loading 显示
   </script>

4. 可以根据需要设置 loading 的样式，如颜色、大小等。UView UI 提供了多种预设的 loading 类型供选择，比如圆环、线性等。

注意，以上代码示例假设你已经在使用 Vue 3 和 Composition API 的基础上开发。如果你想在传统的模板语法中使用，可以参考 UView UI 文档中的详细教程。