不同notice组件的区别
1 .轻量级的信息反馈组件，在顶部居中显示，并且自动消失
2 .不同的状态其实就是左边的图标来提醒他们是不一样的，其他的文字内容都是差不多的
3 .所以在代码层面可以改的更简单的，还有就是过渡动画这里要在优化一下
4 .div里面有大段跨行的文字的话，一定要要用一个p标签包起来，不然会出现下面的和上面的不能对齐
5 .单行文本超出范围添加省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
6 .多行文本超出范围添加省略号
display: -webkit-box;
//将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;
//设置或者检索伸缩盒子对象的子元素的排列方式
-webkit-line-clamp: 3;
//限制一个块元素显示的文本的行数
overflow: hidden;
结构：内层
1 .正常的父子组件结构
1 .父组件有两个函数add,暴露给外面的函数用来添加新的参数，remove:给孩子组件使用删除自己
2 .关键是调用父组件生成的一个新的vue实例是可以直接调用父组件的代码的,所以可以在那个函数里面注入新的数据
2 .代码
import Notification from './notification.vue'
// 也就是说现在引入的组件
import Vue from 'vue/dist/vue.js'
Notification.newinstance =()=>{
const div=document.createElement('div')
div.innerHTML=`<notification></notification>`
document.body.appendChild(div)
// 这里的时候相当于正常Vue的template部分
const notification = new Vue({
el: div,
components: { Notification },
}).$children[0];
// 下面的js部分，这里其实是普通的vue调用.这个0就是里面的组件
return {
notice(options){
notification.add(options)
}
}
}
export default Notification;
结构：外部接口
1 .上面第二条所说的
2 .引入vue,新建一个div插入到页面中,然后把上面的组件引入使用
3 .把引入组件的一个方法暴露出来,然后返回这个方法
4 .
import Noticification from '../notice/index'
let noticeInstance
function getNoticeInstance(){
// 调用组件实例如果之前创建过的话，就返回创建过的，如果没创建果，就返回一个新的
if(noticeInstance){
return noticeInstance
}else{
noticeInstance=Noticification.newinstance({})
return noticeInstance
}
}
function notice(options){
let instance=getNoticeInstance()
// 上一个函数是不能写在这个里面的，因为这notice是一个全局变量，下一次可能需要用到他的值
instance.notice(options)
// 调用生成实例的方法
}
export default{
add(options){
return notice(options)
}
}
// 对原来的函数进行包装，暴露给用户易于使用的接口
功能扩展
1 .还是应该给每一个插入的数据加一个tag的标识，如果是相同的tag，那么只会显示一条，或者仅仅是把里面的信息合并起来。目前终于发现不加tag，同一个类型的问题会不停的报错。其实就是加入之前检查一下数组，如果里面有的话就不往里面push就好
2 .当前页面最多显示10个，如果有多余的，根据配置选项，来决定是采用弹出最先的数据，还是全部显示，还是后面的隐藏，又或者是后面的数据全部合并起来显示
