轻提示

在页面上中下弹出蓝色提示，用于消息通知、加载提示、操作结果提示等场景。

如何使用

引入

本组件引入和其他组件稍有不同，请参考以下代码。

import Vue from "vue";
import 'blitz-ui-demo/dist/index.css'
import { toastPlugin } from "blitz-ui-demo";
import { Toast } from "blitz-ui-demo";

Vue.use(toastPlugin);

---

基础提示

上方Toast 中间Toast 下方Toast

最基础的点击组件显示Toast,可在方法里传入position属性修改Toast位置，默认为视窗上端。默认五秒之后自动关闭。

<div class="wrapper">
  <bl-button @click="showToastTop">上方Toast</bl-button>
  <bl-button @click="showToastMiddle">中间Toast</bl-button>
  <bl-button @click="showToastBottom">下方Toast</bl-button>
</div>


import Vue from "vue";
import {  toastPlugin  } from "blitz-ui-demo";
import {  Toast  } from "blitz-ui-demo";
import {  Button  } from "blitz-ui-demo";



export default {
  methods: {
    showToastTop() {
      this.$toast('提示内容')
    },
    showToastMiddle() {
      this.$toast('提示内容',{position:'middle'})
    },
    showToastBottom() {
      this.$toast('提示内容',{position:'bottom'})
    },
  }
}

---

有关闭按钮的提示

带关闭按钮的Toast

带有关闭按钮的Toast,可在方法里传入带有回调函数的closeButton对象来调用。默认五秒之后自动关闭。

<div class="wrapper">
  <bl-button @click="showToast">带关闭按钮的Toast</bl-button>
</div>


import Vue from "vue";
import {  toastPlugin  } from "blitz-ui-demo";
import {  Toast  } from "blitz-ui-demo";
import {  Button  } from "blitz-ui-demo";



export default {
  methods: {
    showToast() {
      this.$toast('提示内容', {
        closeButton: {
          callback: () => {
            console.log('回调函数的输出');
          }
        }
      })
    }
  }
}

---

可设置自动关闭的时间

可修改自动关闭时间的Toast

可修改Toast的自动关闭时间,可在方法里传入autoClose属性来调用。可设置为false，取消自动关闭。默认五秒之后自动关闭。

<div class="wrapper">
  <bl-button @click="showToast">可修改自动关闭时间的Toast</bl-button>
</div>


import Vue from "vue";
import {  toastPlugin  } from "blitz-ui-demo";
import {  Toast  } from "blitz-ui-demo";
import {  Button  } from "blitz-ui-demo";



export default {
  methods: {
    showToast() {
      this.$toast('本提示将会在两秒后关闭', {autoClose:2})
    }
  }
}

WARNING

autoClose只可设置为数字或false，不可设置为true。

---

可设置提示内容为HTML内容

博客主页

可让Toast显示HTML内容,可在方法里传入enableHtml:true属性来调用。默认五秒之后自动关闭。

<div class="wrapper">
  <bl-button @click="showToast">博客主页</bl-button>
</div>


import Vue from "vue";
import {  toastPlugin  } from "blitz-ui-demo";
import {  Toast  } from "blitz-ui-demo";
import {  Button  } from "blitz-ui-demo";



export default {
  methods: {
    showToast() {
      this.$toast(
      '<a href="https://juejin.cn/user/163177786258141">点击打开AzusaRin的博客主页</a>',
      {enableHtml:true}
      )
    }
  }
}

---

Toast Attributes

参数	说明	类型	可选值	默认值
position	确定Toast的位置	String	'top', 'middle', 'bottom'	'top'
closeButton	Toast带有关闭按钮，需回调函数	Object	—	—
autoClose	Toast自动关闭的开关，或者时间	Boolean, Number	number/false	5
enableHtml	决定Toast是否能表示HTML内容	Boolean	—	false