Vue3从0到1组件开发-系统组件：Message消息

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

基础三大件

前面已经写过了Modal弹框组件，Notice信息组件，加上这章的Message信息组件，基本就覆盖了信息反馈的几大主要方式了。

Modal弹框类似于alert方法的功能，Notice信息类似于应用内通知的信息，那么Message消息组件要实现的功能是什么呢？

先看下效果展示。

图不是很完整，但是能看出来是在页面中间顶部的一个消息提示，等价于手机端的轻提示。

在PC端的作用，就是提示一个可有可无的消息，做一个信息反馈了。毕竟重要的消息还是需要显眼一些的。

结构，结构，还是**的结构。

不过相比起前两个组件，这个组件的结构到时简单不少， 毕竟说到底，就是出现、隐藏、图标、内容这些了。

block content
transition(
  name="slideY-fade" 
  @after-leave="afterLeave" 
  appear)
    div.yx-message( v-show="isShow" )
      span
        yx-icnos(:type="iconType[icon]") {{content}}

结构就是这样咯，transition搞个进入退出的动画。然后显示一个图标，以及内容的展示部分。

样式也比较简单， 相信小伙伴自己ok的。

逻辑，才是核心

虽说逻辑是核心，可是这个组件的逻辑部分还真没啥，毕竟没什么交互，也不支持提前关闭之类的操作。

所以就一个，关闭动画即可。

if (duration > 0) {
 setTimeout(close, duration * 1000)
}

const close = () => {
  isShow.value = false
}

如果觉得有必要的话， 可以参考之前的Notice信息组件添加一个鼠标经过时停止倒计时，即不自动退出的功能。

这样的，可以让部分用户一个缓冲的时间去看清楚信息内容。

改在的方法也可以参考前文了。

这里就不repeat myself了。