Toast 消息通知弹窗

悬浮在页面的消息通知弹窗。可在全局中直接调用this.$toast('content', {postion,autoClose})

基础用法

<template>
  <div>
  <button @click="showToast1">click</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    showToast1(){
      this.$toast('我是 message')
    },
  }
}
</script>
<style>

</style>

Expand Copy Copy

显示位置

支持三种位置显示。top，middle，bottom

<template>
  <div>
  <button @click="showToast1">top</button>
  <button @click="showToast2">middle</button>
  <button @click="showToast3">bottom</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    showToast1(){
      this.showToast('top')
    },
    showToast2(){
      this.showToast('middle')
    },
    showToast3(){
      this.showToast('bottom')
    },
    showToast(position){
      this.$toast('我是 message',{position,autoClose: 3})
    }
  }
}
</script>
<style>

</style>

Expand Copy Copy

延时自动关闭&手动关闭

autoClose设置为false则为手动关闭，为true或者数字则为自动关闭，数字为延时关闭的时间（单位s）。

<template>
  <div>
  <button @click="showToast1">点我自动关闭</button>
  <button @click="showToast2">点我手动关闭</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    showToast1(){
      this.$toast('我是 message1',{autoClose: 8})
    },
    showToast2(){
      this.$toast('我是 message2',{autoClose: false})
    },
  }
}
</script>
<style>

</style>

Expand Copy Copy

内容支持HTML

默认enableHtml: false，true为支持

<template>
  <div>
  <button @click="showToast1">点我</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    showToast1(){
      this.$toast('<p>我是p标签</p>',{autoClose: 8, enableHtml: true})
    },
  }
}
</script>
<style>

</style>

Expand Copy Copy