CWaiting 等待中

功能说明

基于 Taro UI 的模态框和活动指示器封装的等待提示组件，用于显示加载中或处理中的状态，支持显示标题和副标题。

引用方式

import CWaiting from '@components/layout/waiting';

组件参数

• isOpened (Boolean，必选)：是否显示等待框
• title (String，可选)：等待框标题
• sub (String，可选)：等待框副标题
• subType (String，可选)：副标题的颜色类型，默认值为 'warning'

使用示例

基础用法

<template>
  <view class="page">
    <button @tap="evt => showWaiting()">显示等待框</button>
    <CWaiting 
      :isOpened="waitingOpened" 
      title="正在加载中..." 
    />
  </view>
</template>

<script>
import CWaiting from '@components/layout/waiting';

export default {
  components: {
    CWaiting
  },
  data() {
    return {
      waitingOpened: false
    }
  },
  methods: {
    showWaiting() {
      this.waitingOpened = true;
      // 模拟3秒后完成加载
      setTimeout(() => {
        this.waitingOpened = false;
      }, 3000);
    }
  }
}
</script>

带副标题的等待框

<template>
  <view class="page">
    <button @tap="evt => showWaitingWithSub()">显示带副标题的等待框</button>
    <CWaiting 
      :isOpened="waitingOpened" 
      title="正在处理中..." 
      sub="请勿关闭应用" 
    />
  </view>
</template>

<script>
import CWaiting from '@components/layout/waiting';

export default {
  components: {
    CWaiting
  },
  data() {
    return {
      waitingOpened: false
    }
  },
  methods: {
    showWaitingWithSub() {
      this.waitingOpened = true;
      // 模拟处理过程
      setTimeout(() => {
        this.waitingOpened = false;
      }, 3000);
    }
  }
}
</script>

注意事项

1. 等待框无法通过点击遮罩层关闭，需要手动控制 isOpened 属性来关闭等待框
2. 副标题默认使用警告色（橙色），通过 CSS 类 'm-text-warning' 实现
3. 组件基于 Taro UI 的 AtModal 和 AtActivityIndicator，在样式上保持与 Taro UI 一致
4. 建议在异步操作完成后，记得将 isOpened 设置为 false 关闭等待框
5. 组件不包含超时处理，如需超时处理，需要在使用组件的页面自行实现