Toast 轻提示 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <Button @click="showInfoToast">Info</Button>
</template>
<script>
export default {
  methods: {
    showTextToast () {
      this.$Toast.info({content: '文本信息', duration: 1, onClose: this.handleClose})
    }，
    handleClose () {
      console.log('toast消失自定义回调函数')
    }
  }
}
</script>

<template>
  <Button @click="showSuccessToast">success</Button>
  <Button @click="showFailToast">fail</Button>
  <Button @click="showNetToast">network failure</Button>
  <Button @click="showLoadToast">loading</Button>
</template>
<script>
export default {
  methods: {
    showSuccessToast () {
      console.log(this.$Toast)
      this.$Toast.success({content: '成功文本信息', duration: 2, onClose: this.handleClose})
    },
    showFailToast () {
      console.log(this.$Toast)
      this.$Toast.fail({content: '失败文本信息', duration: 3, onClose: this.handleClose})
    },
    showNetToast () {
      console.log(this.$Toast)
      this.$Toast.offline({content: '网络错误文本信息', duration: 4, onClose: this.handleClose})
    },
    showLoadToast () {
      console.log(this.$Toast)
      this.$Toast.loading({content: '加载中文本信息', duration: 5, onClose: this.handleClose})
    }，
    handleClose () {
      console.log('toast消失自定义回调函数')
    }
  }
}
</script>

<template>
  <Button @click="showLoadToast">Loading</Button>
</template>
<script>
export default {
  methods: {
    showLoadToast () {
      this.$Toast.loading({duration: null, onClose: this.handleClose})
      setTimeout(() => {
        this.$Toast.hide()
      }, 3000)
    },
    handleClose () {
      console.log('loading toast消失自定义回调函数')
    }
  }
}
</script>