亿个小目标
本文代码仓库: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