轻提示 Toast

提示信息

<za-cell>
  <za-button size="xs" theme="error" slot="description" @click="visible1 = true">开启</za-button>
  错误提示
</za-cell>
<za-cell>
  <za-button size="xs" theme="success" slot="description" @click="visible2 = true">开启</za-button>
  成功提示
</za-cell>
<za-cell>
  <za-button size="xs" slot="description" @click="visible3 = true">开启</za-button>
  指定关闭时间
</za-cell>
<za-toast :visible.sync="visible1" @close="toastClose">默认3秒自动关闭</za-toast>
<za-toast :visible.sync="visible2" @close="toastClose" @maskClick="visible2 = false">
  <div class="box">
    <za-icon type="right-round-fill" class="box-icon"></za-icon>
    <div class="box-text">预约成功</div>
  </div>
</za-toast>
<za-toast :visible.sync="visible3" @close="toastClose" :duration="10000">指定10秒自动关闭</za-toast>

加载中

<za-cell>
  <za-button size="xs" slot="description" @click="visible4 = true">开启</za-button>
  Loading
</za-cell>
<za-loading :visible.sync="visible4"></za-loading>

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>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      isLoading: false
    }
  },
  methods: {
    toastClose(reason, event){
      console.log(reason, event);
    }
  },
};
</script>

API

Toast Attributes

Toast Event