toast.uvue

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="toast1Tap">点击弹出默认toast</button>
        <button class="uni-btn-v" type="default" @tap="toastTapIconError">点击弹出设置icon的toast</button>
        <button class="uni-btn-v" type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
        <button class="uni-btn-v" type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
        <!-- #ifndef MP-ALIPAY -->
        <button class="uni-btn-v" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <button class="uni-btn-v" type="default" @tap="toast5Tap">点击显示无图标的居底toast</button>
        <!-- #endif -->
        <button class="uni-btn-v" type="default" @tap="hideToast">点击隐藏toast</button>
      </view>
      <text>{{exeRet}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'toast',
        exeRet: ''
      }
    },
    onLoad() {
      uni.showToast({
        title: 'onLoad 调用示例,2秒后消失'
      })
      setTimeout(function () {
        uni.hideToast()
      }, 2000);
    },
    methods: {
      toast1Tap: function () {
        uni.showToast({
          title: "默认",
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      toastTapIconError: function () {
        uni.showToast({
          title: "默认",
          icon: 'error',
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      toast2Tap: function () {
        uni.showToast({
          title: "duration 3000",
          duration: 3000,
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      toast3Tap: function () {
        uni.showToast({
          title: "loading",
          icon: "loading",
          duration: 5000,
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      toast4Tap: function () {
        uni.showToast({
          title: "logo",
          image: "/static/uni.png",
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      // #ifdef APP-PLUS
      toast5Tap: function () {
        uni.showToast({
          title: "显示一段轻提示",
          position: 'bottom',
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res) + new Date()
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      // #endif
      hideToast: function () {
        uni.hideToast()
      }
    }
  }
</script>