不同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个，如果有多余的，根据配置选项，来决定是采用弹出最先的数据，还是全部显示，还是后面的隐藏，又或者是后面的数据全部合并起来显示