Toast 消息提示

全局展示操作反馈信息

基础用法

从顶部、中间或者底部出现，3 秒后会自动消失

我在 Vue.prototype 上注册了 $toast 用于调用。它接收两个参数，分别是 message 消息内容 和 toastOptions 字面量参数

TIP

toastOptions 是一个对象参数，可以 Toast 的相关参数，包括持续时间 duration、弹出位置 positon 等

<ch-button type="primary" @click="topOpen">顶部弹出</ch-button>
<ch-button type="primary" @click="middleOpen">中间弹出</ch-button>
<ch-button type="primary" @click="bottomOpen">底部弹出</ch-button>

<script>
export default {
  methods: {
    topOpen() {
      this.$toast('这是一条顶部的消息提示',{
        duration: 5000
      });
    },
    middleOpen() {
      this.$toast('这是一条中间的消息提示', {
        position: 'middle'
      });
    },
    bottomOpen() {
      this.$toast('这是一条底部的消息提示', {
        position: 'bottom'
      });
    }
  }
}
</script>

设置关闭

Toast 默认自带关闭的文本按钮，这里你可以自定义关闭按钮的文本

使用 showClose 来定义关闭按钮，关闭按钮还可以添加一个回调函数

<ch-button type="primary" @click="hello">你好哇</ch-button>

<script>
export default {
  methods:{
    hello(){
      this.$toast('你好呀',{
        showClose:{
          text: "好的",
          callback: ()=>{
            console.log("好的");
          }
        }
      })
    }
  }
}
</script>

使用 HTML

message 支持传入 HTML 片段

将 useHtml 设置为 true，message 就会被当作 HTML 来处理

<ch-button type="primary" @click="useHtml">使用 HTML</ch-button>

<script>
export default {
  methods: {
    useHtml() {
      this.$toast(
          '<strong>这是 <i style="color: red;">HTML</i> 片段</strong>',{
            useHtml: true
      });
    }
  }
}
</script>

属性

属性	说明	类型	可选值	默认值
message	消息内容	String	——	——
duration	显示时间，毫秒	Number	——	3000
showClose	关闭按钮	Objet	可以设置文本和回调函数	{text:'ok',callback:()=>{}}
position	弹出位置	String	top / middle / bottom	top
useHtml	是否使用HTML	Boolean	——	false