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

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

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

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

大致步骤:

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

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

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

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

第一步:

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

<template>
    <div class="xtx-message">
        <i class="iconfont">i>
        <span class="text">span>
    div>
template>
 
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'XtxMessage',
  setup () {
    
  }
}
script>
 
<style scoped lang="less">
.xtx-message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
style>

第二步:

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

实现思路:

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

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

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

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

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

<template>
  <Transition name="down">
    // 因为我们在setup里面定义的style本来就是一个对象
    // 所以:style="style[type]"不用加 "{}" 直接使用
    <div class="xtx-message" :style="style[type]">
      // 动态的添加class类有两种方法, 第一是对象; 第二是数组
      // 对象的方法是需要判断的, 为true就添加; 否则不添加
      // 数组的方式不需要判断, 直接添加
      <i class="iconfont" :class="[style[type].icon]">i>
      <span class="text">{{text}}span>
    div>
  Transition>
template>
 
<script>
export default {
  name: 'XtxMessage',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      // warn 警告  error 错误  success 成功
      default: 'warn'
    }
  },
  setup () {
    // 定义一个对象，包含三种情况的样式，对象key就是类型字符串
    const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        icon: 'icon-shanchu',
        color: '#F56C6C',
        backgroundColor: 'rgb(254, 240, 240)',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        icon: 'icon-queren2',
        color: '#67C23A',
        backgroundColor: 'rgb(240, 249, 235)',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
 
    return { style }
  }
}
script>
 
<style scoped lang="less">
......
style>

第三步:

我们会封装一个函数(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 组件的过渡效果就会实现 

<template>
  <Transition name="down">
    <div class="xtx-message" :style="style[type]" v-show="show">
      <i class="iconfont" :class="[style[type].icon]">i>
      <span class="text">{{text}}span>
    div>
  Transition>
template>
 
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'XtxMessage',
  props: {
    ......
  },
  setup () {
    ......
 
    const show = ref(false)
    onMounted(() => {
      show.value = true
    })
 
    return { style, show }
  }
}
script>
 
<style scoped lang="less">
.down {
  &-enter {
    &-from {
      transform: translate3d(0,-75px,0);
      opacity: 0;
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      transform: none;
      opacity: 1;
    }
  }
}
......
style>

第四步:

提供两种调用方式, 组合式 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" :