Vue — Alert 组件
最后更新于：2022-04-02 08:09:27
>[success] # 封装一个Alert 组件
* 想做出来的效果
[本节笔记文章参考，更多细节可以参考这篇文章](https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5be69786e51d4504d400e184)
~~~
1.第一反应 封装的代码效果代码如下：
这是一条提示信息
~~~
* 产生的问题
~~~
1.需要额外的 data 来控制 Alert 的显示状态；
2.Alert 的位置，是在当前组件位置，并非在 body 下，有可能会被其它组件遮挡。
~~~
>[danger] ##### 看一下其他组件库类似的使用
~~~
1.直接可以通过事件js 调用组件
methods: {
handleShow () {
this.$Alert({
content: '这是一条提示信息',
duration: 3
})
}
}
~~~
>[info] ## 分析
~~~
1.因此可以发现其他 组件库这种类似组件是直接通过js调用，但是这里有个疑问我们写的组件一般都是由
template、script、style 三个标签，乍一看并不是一个js对象那是如何使用的呢？
'解答':因为这些组件会被 Webpack 的 vue-loader 编译，把 template 编译为 Render 函数，最终就会成为
一个 JS 对象
'延伸' :这里就有一个比较有，如果经常使用vue并且有注释的好习惯，你会发现在'.vue'文件注释都是
js 注释标准如图
~~~
>[danger] ###### 明确我们要做的
~~~
1.我们的组件要在boby层这样就不会出现有可能被其它组件遮挡
2.我们的组件也要有一个content 用来展示信息的属性
3.我们也要有一个duration 可以设置时间
~~~
';