组件封装 - 消息提示框组件

先来看最终效果是怎样的:

我们会封装一个像 Element UI 一样的消息提示框组件, 用函数调用的方法来将消息提示框组件显示到页面

this.$message({
    message: '恭喜你，这是一条成功消息',
    type: 'success'
});

大致步骤:

1. 首先需要完成消息提示框组件的基础布局(主要由一个i标签和span标签组成)

2. 通过 css 样式来改变消息提示框组件的颜色和字体图标的样式

3. 我们需要封装一个函数, 主要是将消息提示框组件变成一个虚拟节点; 再将此虚拟节点动态的添加到一个真实的 DOM 对象里面去

4. 我们需要提供两种调用此函数的方式, 第一种是组合式 api 的方法; 第二种是像 Vue2 那样使用 this 来进行调用函数

第一步:

完成消息提示框的基本布局

第二步:

通过 css 样式动态的控制消息提示框组件的颜色和字体图标的样式

实现思路:

1. 我们需要将所有会出现的颜色(css样式), 通过一个对象列举出来

2. 通过父组件传入的数据(type), 拿着 type 数据去我们定义的这个对象里面找; 将对应的样式提取出来

3. 通过 style 属性动态将提取的样式显示在外层的 div 标签上面, 当然 icon 字体图标也需要跟着改变

此组件封装一共提供了三种样式

• 成功 success
• 失败 error
• 警告 warning

第三步:

我们会封装一个函数(message), 用户可以使用函数一样; 需要时就调用显示消息提示框组件

思路分析:

1. 导入封装好的消息提示框组件

2. 导入创建虚拟节点的方法(createVNode)和 render 函数

3. 创建一个真实的 DOM 对象, 给这个 DOM 对象加上一个 class 类

4. 向外默认导出一个函数, 此函数需要接收消息提示框组件的父组件传入的 props 数据

5. 将导入的消息提示框组件变成虚拟节点

6. 使用 render 函数将虚拟节点插入到真实的 DOM 对象里面

7. 消息提示框组件并不是一直显示在页面, 定义定时器; 在3秒之后将消失提示框组件销毁

8. 给消息提示框组件加上一个过渡效果

// 导入需要变为虚拟节点的组件
import XtxMessage from './xtx-message.vue'
// 导入创建虚拟节点方法和render函数
import { createVNode, render } from 'vue'

// 创建一个真实的DOM节点
const div = document.createElement('div')
// 给这个DOM节点加上一个class类
div.setAttribute('class', 'xtx-message-container')
// 将这个DOM节点插入到body标签中
document.body.appendChild(div)

let timeId = null

// 向外默认导出一个函数
export default (props) => {
  // 将消息提示框组件变为一个虚拟节点
  // vnode的第一个参数是对应组件, 第二个参数是需要的props属性
  const vnode = createVNode(XtxMessage, props)
  // 将虚拟节点插入到正式的DOM节点中
  render(vnode, div)

  if (timeId) {
    clearTimeout(timeId)
  }
  timeId = setTimeout(() => {
    // 将div元素里面内容变为null就会销毁
    render(null, div)
  }, 3000)
}

让 Transition 组件的过渡效果实现, 有两个条件:

1. 组件的创建和效果

2. 组件的显示和隐藏

所以, 我们定义一个变量 show , 在组件被挂载了之后; 就让其显示

这样 Transition 组件的过渡效果就会实现 

第四步:

提供两种调用方式, 组合式 api 和 this 调用的方式 

思路分析:

1. 组合式 api 也就是 Vue3 的方法, 直接将 message 函数导入; 然后调用即可

2. 将 message 函数追加到 app 的原型里面, 这样可以在 created 里面使用 this 来调用(但是不建议组合式 api 和选项型 api 混合使用)

3. 直接在 setup 里面调用此函数

import Message from '@/components/library/message.js'

export default {
  install (app) {
    // 将Message函数追加到app的原型上
    // key值为$Message
    app.config.globalProperties.$Message = Message
  }
}

 组合式 api 调用方式:

 this 调用方式:

 组合式 api 中使用 "this" :