OmniCard/mpuniapp/pages/API/toast/toast.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view direction="vertical" style="flex:1">
  <!-- #endif -->
    <page-head :title="data.title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-padding-wrap">
        <text class="uni-title-text uni-common-mb">设置icon</text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangeIcon">
          <radio class="uni-list-cell uni-list-cell-pd radio-icon" v-for="(icon, index) in data.icon_enum" :key="icon.value"
            :class="index < data.icon_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="icon.value"
            :checked="index === data.icon_current">{{icon.name}}</radio>
        </radio-group>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示自定义图标</view>
        <switch :checked="data.imageSelect" @change="change_image_boolean" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="data.maskSelect" @change="change_mask_boolean" />
      </view>
      <view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
      <view class="uni-list-cell-padding">
        <slider @change="sliderChange" foreColor="#007AFF" :value="data.intervalSelect" :min="1500" :max="5000"
          :show-value="true" />
      </view>
      <view class="uni-btn-v">
        <button type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
        <button type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
      </view>
      <!-- #ifdef APP -->
      <view class="uni-padding-wrap uni-common-mt">
        <text class="uni-title-text uni-common-mb"> 设置position，仅App生效 </text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangePosition">
          <radio class="uni-list-cell uni-list-cell-pd radio-position" v-for="(position, index) in data.position_enum"
            :key="position.value" :class="index < data.position_enum.length - 1 ? 'uni-list-cell-line' : ''"
            :value="position.value" :checked="index === data.position_current">{{position.name}}</radio>
        </radio-group>
      </view>
      <button class="uni-btn uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
      <!-- #endif -->
      <text>{{data.exeRet}}</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  type IconItemType = {
    value : "success" | "error" | "fail" | "exception" | "loading" | "none";
    name : string
  }
  type PositionItemType = {
    value : "top" | "center" | "bottom";
    name : string
  }

  type DataType = {
    title: string;
    exeRet: string;
    imageSelect: boolean;
    maskSelect: boolean;
    intervalSelect: number;
    position_current: number;
    position_enum: PositionItemType[];
    icon_current: number;
    icon_enum: IconItemType[];
  }

  // 使用reactive包装数据，避免ref数据在自动化测试中无法获取
  const data = reactive({
    title: 'toast',
    exeRet: '',
    imageSelect: false,
    maskSelect: false,
    intervalSelect: 1500,
    position_current: 0,
    position_enum: [
      { "value": "top", "name": "top: 居上显示（Android 暂不支持）" },
      { "value": "center", "name": "center: 居中显示（Android 暂不支持）" },
      { "value": "bottom", "name": "bottom: 居底显示" },
    ],
    icon_current: 0,
    icon_enum: [
      {
        value: 'success',
        name: '显示成功图标',
      },
      {
        value: 'error',
        name: '显示错误图标',
      },
      {
        value: 'loading',
        name: '显示加载图标',
      },
      {
        value: 'none',
        name: '不显示图标',
      },
    ],
  } as DataType)

  onMounted(() => {
    uni.showToast({
      title: 'onMounted 调用示例,3秒后消失',
      duration: 3000
    })
    setTimeout(function () {
      uni.hideToast()
    }, 3000);
  })

  //自动化测试例专用
  const jest_getWindowInfo = () : GetWindowInfoResult => {
    return uni.getWindowInfo();
  }

  const radioChangeIcon = (e : UniRadioGroupChangeEvent) => {
    for (let i = 0; i < data.icon_enum.length; i++) {
      if (data.icon_enum[i].value === e.detail.value) {
        data.icon_current = i;
        break;
      }
    }
  }

  const change_image_boolean = (e : UniSwitchChangeEvent) => {
    data.imageSelect = e.detail.value
  }

  const change_mask_boolean = (e : UniSwitchChangeEvent) => {
    data.maskSelect = e.detail.value
  }

  const sliderChange = (e : UniSliderChangeEvent) => {
    data.intervalSelect = e.detail.value
  }

  const radioChangePosition = (e : UniRadioGroupChangeEvent) => {
    for (let i = 0; i < data.position_enum.length; i++) {
      if (data.position_enum[i].value === e.detail.value) {
        data.position_current = i;
        break;
      }
    }
  }

  const toast1Tap = () => {
    uni.showToast({
      title: "默认",
      icon: data.icon_enum[data.icon_current].value,
      duration: data.intervalSelect,
      image: data.imageSelect ? "/static/test-image/logo.png" : null,
      mask: data.maskSelect,
      success: (res) => {
        // console.log('success:',res)
        data.exeRet = "success:" + JSON.stringify(res)
      },
      fail: (res) => {
        data.exeRet = "fail:" + JSON.stringify(res)
      },
    })
  }

  const toast3Tap = () => {
    uni.showToast({
      title: "默认",
      icon: 'none',
      duration: data.intervalSelect,
      image: data.imageSelect ? "/static/test-image/logo.png" : null,
      mask: data.maskSelect,
      success: (res) => {
        // console.log('success:',res)
        data.exeRet = "success:" + JSON.stringify(res)
      },
      fail: (res) => {
        data.exeRet = "fail:" + JSON.stringify(res)
      },
    })
  }

  // #ifdef APP
  const toast2Tap = () => {
    let positionValue = data.position_enum[data.position_current].value
    uni.showToast({
      title: "显示一段轻提示,position:" + positionValue,
      position: positionValue,
      success: (res) => {
        data.exeRet = "success:" + JSON.stringify(res)
      },
      fail: (res) => {
        data.exeRet = "fail:" + JSON.stringify(res)
      },
    })
  }
  // #endif

  const hideToast = () => {
    uni.hideToast()
  }

  defineExpose({
    data,
    toast1Tap,
    toast3Tap,
    // #ifdef APP
    toast2Tap,
    // #endif
    hideToast
  })
</script>