不同notice組件的區(qū)別
1 .輕量級的信息反饋組件，在頂部居中顯示伐坏，并且自動消失
2 .不同的狀態(tài)其實就是左邊的圖標來提醒他們是不一樣的谨设，其他的文字內(nèi)容都是差不多的
3 .所以在代碼層面可以改的更簡單的，還有就是過渡動畫這里要在優(yōu)化一下
4 .div里面有大段跨行的文字的話缰泡，一定要要用一個p標簽包起來烧颖，不然會出現(xiàn)下面的和上面的不能對齊
5 .單行文本超出范圍添加省略號
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
6 .多行文本超出范圍添加省略號
display: -webkit-box;
//將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient: vertical;
//設置或者檢索伸縮盒子對象的子元素的排列方式
-webkit-line-clamp: 3;
//限制一個塊元素顯示的文本的行數(shù)
overflow: hidden;
結構：內(nèi)層
1 .正常的父子組件結構
1 .父組件有兩個函數(shù)add,暴露給外面的函數(shù)用來添加新的參數(shù)弱左，remove:給孩子組件使用刪除自己
2 .關鍵是調(diào)用父組件生成的一個新的vue實例是可以直接調(diào)用父組件的代碼的,所以可以在那個函數(shù)里面注入新的數(shù)據(jù)
2 .代碼
import Notification from './notification.vue'
// 也就是說現(xiàn)在引入的組件
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調(diào)用.這個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(){
// 調(diào)用組件實例如果之前創(chuàng)建過的話炕淮，就返回創(chuàng)建過的，如果沒創(chuàng)建果跳夭，就返回一個新的
if(noticeInstance){
return noticeInstance
}else{
noticeInstance=Noticification.newinstance({})
return noticeInstance
}
}
function notice(options){
let instance=getNoticeInstance()
// 上一個函數(shù)是不能寫在這個里面的涂圆，因為這notice是一個全局變量，下一次可能需要用到他的值
instance.notice(options)
// 調(diào)用生成實例的方法
}
export default{
add(options){
return notice(options)
}
}
// 對原來的函數(shù)進行包裝币叹，暴露給用戶易于使用的接口
功能擴展
1 .還是應該給每一個插入的數(shù)據(jù)加一個tag的標識润歉，如果是相同的tag，那么只會顯示一條颈抚，或者僅僅是把里面的信息合并起來踩衩。目前終于發(fā)現(xiàn)不加tag，同一個類型的問題會不停的報錯。其實就是加入之前檢查一下數(shù)組驱富，如果里面有的話就不往里面push就好
2 .當前頁面最多顯示10個锚赤，如果有多余的，根據(jù)配置選項褐鸥，來決定是采用彈出最先的數(shù)據(jù)线脚，還是全部顯示，還是后面的隱藏叫榕，又或者是后面的數(shù)據(jù)全部合并起來顯示
