WARNING

请在手机模拟器模式查看该功能

toast props

属性	描述	类型	默认值
type	toast类型，有loading，prompt（纯文案）， success， fail可选	_ string _	prompt
mask	是否显示遮罩层	boolean	true
message	toast内容	string	-
duration	多少时间（ms）后自动关闭，如果为0，需要调用clear手动关闭	number	1500
verticalPosition	toast竖直方向的位置可选择middle和bottom两个值	string	middle
onShow	打开toast的回调函数	function	-
onHide	关闭toast的回调函数	function	-

toast 方法

名称	描述
Toast.loading	loading的toast展示
Toast.success	success的toast展示
Toast.fail	fail的toast展示
Toast.clear	关闭toast，并清除toast相关的dom元素

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">基本用法</p>
      <vill-button @click="openToast">打开toast</vill-button>
    </div>
    <div class="items">
      <p class="item_title">loading-toast（默认1.5s自动关闭）</p>
      <vill-button @click="openLoadingToast">loading-toast（默认1.5s自动关闭）</vill-button>
    </div>
    <div class="items">
      <p class="item_title">loading-toast（手动关闭）</p>
      <vill-button @click="handleLoadingToast">loading-toast（手动关闭）</vill-button>
    </div>
    <div class="items">
      <p class="item_title">success-toast</p>
      <vill-button @click="openStatusToast('success')">success-toast</vill-button>
    </div>
    <div class="items">
      <p class="item_title">fail-toast</p>
      <vill-button @click="openStatusToast('fail')">fail-toast</vill-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toast({
        message: '这是toast的内容',
        duration: 3000,
        mask: false,
        onShow: () => {
          console.log('我打开了toast')
        },
        onHide: () => {
          console.log('我关闭了toast')
        }
      })
    },

    openLoadingToast() {
      this.$toast.loading('loading-toast（默认1.5s自动关闭）')
    },

    handleLoadingToast() {
      const toast = this.$toast.loading({
        message: 'loading-toast（手动关闭）',
        duration: 0,
        verticalPosition: 'top'
      })
      setTimeout(() => {
        toast.clear()
      }, 2000)
    },

    openStatusToast(type) {
      this.$toast[type](type + '-toast')
    }
  }
}
</script>