Toast 轻提示

弹出式消息提示

引入

import { Toast } from 'mand-mobile'
Toast.succeed('操作成功')

代码演示

纯文字

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-0">
    <md-button @click="showTextToast">纯文字</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showTextToast() {
      Toast.info('一段文字')
    },
  },
}
</script>
 
                

失败

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-2">
    <md-button @click="showSucceedToast">失败</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showSucceedToast() {
      Toast.failed('操作失败')
    },
  },
}
</script>
 
                

连续调用

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-3">
    <md-button @click="start">连续调用</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    start() {
      Toast.loading('载入中')
      setTimeout(() => {
        Toast.hide()
        setTimeout(() => {
          Toast.failed('载入失败')
        }, 10)
      }, 500)
    },
  },
}
</script>
 
                

自定义位置

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-0">
    <md-button @click="showTextToast">自定义位置</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showTextToast() {
      Toast({
        content: '自定义位置',
        position: 'bottom',
      })
    },
  },
}
</script>
 
                

成功

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-1">
    <md-button @click="showSucceedToast">成功</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showSucceedToast() {
      Toast.succeed('操作成功')
    },
  },
}
</script>
 
                

载入

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-3">
    <md-button @click="showLoadingToast">载入</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showLoadingToast() {
      Toast.loading('载入中')
      setTimeout(() => {
        Toast.hide()
      }, 3000)
    },
  },
}
</script>
 
                

长文字

<template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-1">
    <md-button @click="showToast">长文字</md-button>
  </div>
</template>
<script>
import {Toast, Button} from 'mand-mobile'
export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showToast() {
      Toast.succeed('文字部分最多展示十二个字最多展示两行')
    },
  },
}
</script>
 
                

API

Toast({content, icon, duration, position, hasMask, parentNode})

显示自定义提示

Toast.info(content, duration, hasMask, parentNode)

显示纯文本提示

Toast.succeed(content, duration, hasMask, parentNode)

显示成功提示

Toast.failed(content, duration, hasMask, parentNode)

显示失败提示

Toast.loading(content, duration, hasMask, parentNode)

显示载入提示

Toast.hide()

隐藏提示