极简系列---vue2.x消息组件message

亿个小目标

本文代码仓库：https://github.com/littleluckly/vue2.x-comonents-study

实现一个小小目标—极简版的messge消息组件

• 支持多种调用方式
  1. 组件内this.$message方式调用
  2. 在.js文件中作为一个函数独立使用
• 支持手动关闭message

素材准备

素材准备：一个普通的message.vue单文件组件

• 接受两个参数：消息文本message、持续时间duration
• 两个方法：显示消息组件show、关闭消息组件close

// message.vue
<template>
  <div class="message" v-if="isShow">
    <p>
      {
   {
    message }}
    </p>
  </div>
</template>

<script>
export default {
   
  props: {
   
    message: {
   
      type: String,
      required: true,
    },
    duration: {
   
      type: Number,
      default: 3