哈喽哈喽大家好！周六小滴来更新啦！马上就要过年了，不知道大家有没有患上一种”过个年再说的“的病呢？虽然大家都很期待过年放假但是年前的事还是要年前弄完啊，不然过个年都不舒坦。废话不多说，看看今天大钊老师给大家带来什么干货吧！
前言：
前几天客户经理不让我用某饿了么之类的UI库做一个轻提示之类的组件，当时一想我是饿了么战士，怎么会写哪个东西，然后我就想着用个alert糊弄过去，但是不行，然后我就细琢磨，发现Vue有个非常不错的Vue.extend。
经过一番努力，我学会了，可能是以前学的时候马虎漏掉了。不过问题不大，还能肝。
我们先思考下面的问题：
在写vue项目的时候啊，我们有了初始化的根实例之后，页面之间都是通过router进行管理，组件也是通过import进行局部注册，但是如果我要是想从接口动态渲染组件怎么办？想实现一个类似于 window.alert() 提示组件就像是调用 JS 函数一样调用它？
提前写好？
哪有那么多提前，有这个力气还不如想一想今晚去哪干饭？
回到正题哈
首先：
我先提前准备好一个干净的vue2.x的项目，然后我写好一个组件，叫什么名字好呢？就叫Toast，妥妥的轻提示
<template>
<div class="box" v-if="isShow">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name:'Toast'
}
</script>
<style lang="">
</style>
看到这里那就可能有些铁子问，为什么要放一个v-if上去？还有哪个msg是什么东西，还有哪个类名什么什么的，我们先把这些问题放一下，后面会解答
既然想要调用JS函数一样愉快使用，那我们就这么愉快的决定了。
然后：
我在我的utils.js文件中写下面的代码
import vue from 'vue'
import Toast from '../views/Toast.vue'
// 生成构造函数
const ToastConstructor = vue.extend(Toast)
function showToast(txt, onTime = 2000) {
let newDom = new ToastConstructor({
el: document.createElement('div'),
data() {
return {
msg: txt,
isShow: true
}
}
});
document.body.appendChild(newDom.$el)
setTimeout(() => { newDom.isShow = false }, onTime)
}
//全局组件，挂载到vue原型上
function regFn() {
vue.prototype.$toast = showToast
}
export default regFn
首先我们引入vue和Toast组件，毕竟我们需要用到vue的extend，肯定带它一起玩，不带它闹脾。
然后我用Vue.extend生成一个构造函数--->「const ToastConstructor = vue.extend(Toast)」
然后再进行二次封装，搞一个「showToast函数」，传入两个参数，一个是「内容txt」，一个是「时间onTime」，轻提示吗，肯定一下子又消失了，那个内容就是模板「msg」里要传入的内容，
后来:
我们new一个「newDom，」 它接收的是一个对象，就是把下面的东西装起来，然后el是创生成一个「dom」
然后下面data返回「msg」就是模板哪里的那个东西知道了吧，然后将传进来的「txt」给他安上，那个isShow也是就是模板上面的「v-if」的，因为要创建一个元素，肯定这个好使，现在差不多完成啦，铁子们再坚持一下
然后我们再进行挂载，怎么挂载呢？用「document.body.appendChild(newDom.$el)」
为什么呢？
「document.body.appendChild()」 是将指定的「ewDom」的 「$el」加到「document.body」的末尾
然后我们轻提示完了是不是要消失，所以就用「setTimeout(() => { newDom.isShow = false }, onTime)」 将它两秒后消失，
然后就到了挂载到Vue原型上了，然后就是导出啦，不导出别人不知道你搞了什么出来。
再且：
在main入口文件引入这个utils.js，然后全局使用
//引入
import ToastDom from './util/utils'
// 全局注册使用
Vue.use(ToastDom)
然后在随便一个页面使用，我这里是在App.vue中
<template>
<div id="app">
<button @click="addDom">动态添加组件</button>
</div>
</template>
<script>
export default {
methods: {
addDom(){
this.$toast('你瞧瞧我做的轻提示')
}
},
};
</script>
<style lang="less">
</style>
这里我用一个按钮然后配合一个点击事件，让他使用这个 「$toast，」 并传入一个字端，至此，大功告成。看看效果
