轻提示 Toast

基本用法

zarm-vue 为 Vue.prototype 上添加了全局方法：$zaToast 因此在 vue instance 内可以采用 this.$zaToast(messgae, options) 或 this.$zaToast(options) 的方式调用。

普通

<script>
export default{
  methods: {
    show() {
      this.$zaToast('this is toast')
    }
  }
}
</script>

指定停留时间

<script>
export default{
  methods: {
    show() {
      this.$zaToast('toast last for 5 sec', {
        duration: 5000,
      })
    }
  }
}
</script>

自定义内容

<template lang="html">
  <div>
     <div class="demo-hidden">
      <za-button @click="visible=true">Click me</za-button>
      <div>
        <za-toast
          :visible.sync='visible'
           @close='handleClose'
           :duration='4000'>
           <div>指定4秒自动关闭</div>
        </za-toast>
      </div>
      </div>
      </div>
</template>
<script>
export default {
  data() {
    return {
        visible:false
    }
  }
};
</script>

API

Toast Attributes

Toast Event