Message消息提示

✨简单用法

从三个位置出现，3 秒后自动消失。

顶部出现 中部出现 底部出现

$message为全局注册的插件，接收的第一个参数为提示框消息，第二个参数为配置项duration代表关闭时间单位是毫秒，默认是0不关闭，position弹出位置。

<template>
  <div>
      <wb-button @click="showTop">顶部出现</wb-button>
      <wb-button @click="showMiddle">中部出现</wb-button>
      <wb-button @click="showBottom">底部出现</wb-button>
  </div>
</template>
<script>
export default {
    methods:{
        showTop(){
            this.$message(
                    '这是一条消息提示', 
                    {duration:3000,position:'top'}
            )
        },
        showMiddle(){
            this.$message(
                    '这是一条消息提示',
                    {duration:3000,position:'middle'}
            )
        },
        showBottom(){
            this.$message(
                    '这是一条消息提示',
                    {duration:3000,position:'bottom'}
            )
        }
  }
}
</script>

显示代码 复制代码 复制代码

✨可关闭

可以添加关闭按钮。

点击可关闭

默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的Message，可以使用showClose属性。同时可以通过onclose属性指定关闭时所执行的回调函数内容。

<template>
  <div>
      <wb-button @click="show">点击可关闭</wb-button>
  </div>
</template>
<script>
export default {
    methods:{
        show(){
            this.$message(
                    '这是一条可关闭的消息提示', 
                    {duration:0,position:'top',showClose:true,onclose:function(){alert('回调函数想干嘛')}}
            )
        },
  }
}
</script>

显示代码 复制代码 复制代码

✨使用 HTML 片段

支持传入 HTML 片段展示。

点击可关闭

enableHtml属性设置为true，message 就会被当作 HTML 片段处理

<template>
  <div>
      <wb-button @click="show">点击可关闭</wb-button>
  </div>
</template>
<script>
export default {
    methods:{
        show(){
            this.$message(
                    '<strong>这是 <i>HTML</i> 片段</strong>', 
                    {duration:0,position:'top',showClose:true,enableHtml:true,onclose:function(){alert('回调函数想干嘛')}}
            )
        },
  }
}
</script>

显示代码 复制代码 复制代码

📌 Options

参数	说明	类型	可选值	默认值
message	消息文字	string	—	—
duration	显示时间, 毫秒。	number	—	0
position	展示位置	string	top/middle/bottom	top
showClose	是否显示关闭按钮	boolean	—	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	—	—
enableHtml	是否将 message 属性作为 HTML 片段处理	boolean	—	false