使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框

提示：记录工作中遇到的需求及解决办法

---

前言

在此之前一直不明白Vue.extend( )干什么用的，如何使用，看了一些视频，再结合vue文档，浅浅的理解了一些，以及一些简单的应用，如有不对请指出。
我将使用脚手架生成一个vue2项目来解释。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、目录结构

二、代码

1. 创建 m-Toast.vue 文件

<template><div class="message"><div class="text">{{ text }}</div></div>
</template> 
<script>
export default {name: 'm-Toast',props: {text: {type: String,default: ''},},mounted () {this.timer = setTimeout(() => {this.$destroy()clearTimeout(this.timer);}, 2000)},destroyed () {clearTimeout(this.timer);document.body.removeChild(this.$el)},methods: {},
}
</script>
<style scoped>
.message {min-width: 380px;background-color: #f0f9eb;color: #67c23a;position: fixed;padding: 15px 15px 15px 20px;top: 20px;left: 50%;z-index: 2022;font-size: 14px;transform: translate(-50%, 0);
}.text {overflow: hidden;align-items: center;
}
</style>

2. 创建 global.js 文件

import Vue from "vue";
import Toast from "./components/m-Toast.vue";/** 创建 Toast对应的Vue子类(构造器)* 结合vue文档 和 视频，* extends 的参数可以通过导入一个写好的组件* 或者 是函数 ，例如： * {*	template: '<div class="message">*								<div class="text">{{ text }}</div>*							</div>',*	data: function () {*		return {*			text: '测试',*		}*	}* }* 下面我选择通过导入组件的方法，因为方便使用样式，结构更明了*/
let ToastSubclass = Vue.extend(Toast)// 全局挂载到原型上方便调用
Vue.prototype.$toast = function (text) {// 创建实例let ToastConstructor = new ToastSubclass({// 就是在调用组件的时候，给组件传递属性值propsData: {text}});/** 挂载(渲染组件)* 使用 $mount() 但不传挂载点，返回一个完整的 Vue 组件实例*/ToastConstructor.$mount()// 把渲染后的真实DOM插入到BODY中即可document.body.appendChild(ToastConstructor.$el)
}

3. 在 main.js 文件中导入 global.js 文件

import Vue from 'vue'
import App from './App.vue'
// 导入 global.js 文件
import './global.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

4. 在 App.vue 文件中使用 全局方法创建的 组件

<template><div id="app"><button @click="config">按钮</button></div>
</template><script>export default {name: 'App',data () {return {count: 0}},mounted () {},methods: {config () {this.$toast(`测试${this.count++}`)}}
}
</script><style></style>