Toast 消息提示

基础用法

<template>
  <div>
    <plv-button @click="open1">消息</plv-button>
    <plv-button @click="open2">成功</plv-button>
    <plv-button @click="open3">警告</plv-button>
    <plv-button @click="open4">错误</plv-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$toast('这是一条消息');
      },
      open2() {
        this.$toast({
          message: '这是一条成功消息',
          type: 'success'
        });
      },
      open3() {
        this.$toast({
          message: '这是一条警告消息',
          type: 'warning'
        });
      },
      open4() {
        this.$toast({
          message: '这是一条错误消息',
          type: 'error'
        });
      }
    }
  };
</script>

显示代码

使用组件方式

<template>
  <div>
    <plv-button @click="open">打开</plv-button>
    <plv-toast v-model="visible" type="success">这是一条成功的消息</plv-toast>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    },
    methods: {
      open() {
        this.visible = true;
      }
    }
  };
</script>

显示代码

可关闭

<template>
  <div>
    <plv-button @click="open1">消息</plv-button>
    <plv-button @click="open2">成功</plv-button>
    <plv-button @click="open3">警告</plv-button>
    <plv-button @click="open4">错误</plv-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$toast({
          showClose: true,
          message: '这是一条消息'
        });
      },
      open2() {
        this.$toast({
          showClose: true,
          message: '这是一条成功消息',
          type: 'success'
        });
      },
      open3() {
        this.$toast({
          showClose: true,
          message: '这是一条警告消息',
          type: 'warning'
        });
      },
      open4() {
        this.$toast({
          showClose: true,
          message: '这是一条错误消息',
          type: 'error'
        });
      }
    }
  };
</script>

显示代码

快捷方式

<template>
  <div>
    <plv-button @click="open1">消息</plv-button>
    <plv-button @click="open2">成功</plv-button>
    <plv-button @click="open3">警告</plv-button>
    <plv-button @click="open4">错误</plv-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$toast.info('这是一条消息');
      },
      open2() {
        this.$toast.success('这是一条成功消息');
      },
      open3() {
        this.$toast.warning('这是一条警告消息');
      },
      open4() {
        this.$toast.error('这是一条错误消息');
      }
    }
  };
</script>

显示代码

Attributes Or Options

参数	说明	类型	可选值	默认值
value / v-model	是否显示 Toast，仅组件方式生效	Boolean	-	false
message	消息文字	String	-	提示
type	消息类型	String	success warning error info	info
customClass	自定义类名	String	-	-
duration	显示时间（毫秒），0为不自动关闭	Number	-	3000
showClose	是否显示关闭按钮	Number	-	false
icon	自定义图标，会覆盖type相应图标	String	-	-

Events

事件名称	说明	回调参数
open	在 Toast 打开时触发	-
close	在 Toast 关闭时触发	-