Toast

为了方便用户使用，Toast组件被封装成插件的形式，建议用户应该在全局注册

import toast from "../../../src/plugins/toast.js";
import Vue from "vue";

Vue.use(toast);

后面只需通过调用this.$ztoast(title, options)方法，

title:String //提示文字内容

options={
    closeButtonText: String,//自定义按钮文字, 默认关闭
    layout:String,//自定义内容布局：column|row, 默认row
    position:String,//显示位置：bottom|top, 默认top
    showCloseButton:Boolean,//是否显示关闭按钮, 默认为true
    autoClose:Boolean//是否自动关闭, 默认为true
    duraiton:Boolean//显示延时多少毫秒后关闭, 默认2000ms
}

<template>
  <div>
    <p>
      <z-button @click="toastTop">触发 top toast</z-button>
      <z-button @click="toastBottom">触发 bottom toast</z-button>
      <z-button @click="toastLayoutColumn">触发上下布局toast</z-button>
    </p>
  </div>
</template>
<script>
import toast from "../../../src/plugins/toast.js";
import Button from "../../../src/components/button/button.vue";
import Vue from "vue";

Vue.use(toast);

export default {
  components: {
    "z-button": Button
  },
  methods: {
    toastTop() {
      this.$ztoast(
        "hi, zhaKU! 我在上面展示 我在上面展示 我在上面展示 我在上面展示 我在上面展示 我在上面展示 我在上面展示 我在上面展示",
        {
          closeButtonText: "知道了",
          position: "top"
        }
      );
    },
    toastBottom() {
      this.$ztoast("hi, zhaKU! 我在下面展示", {
        closeButtonText: "知道了",
        position: "bottom"
      });
    },
    toastLayoutColumn() {
      this.$ztoast("hi, zhaKU! 我是上下布局", {
        closeButtonText: "知道了",
        layout: "column"
      });
    }
  }
};
</script>

# Toast

Toast