造輪子 toast元件的實現 下

2022-08-27 01:15:08 字數 2244 閱讀 2261

1.解決 toast 中傳入 html 的問題，通過假的 slot 來實現

// plugins.js


toast.$slots.default = [message]


// toast.vue


// 使用


created() )


},
2.在 toast 中加 html 是比較危險的乙個動作，所以要加乙個選項預設不開啟。

// toast.vue


// plugin.js，進行傳遞引數的改寫


propsdata:toastoptions


// 使用


created() )


},
3.flex-shrink的使用,flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

.item
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。如果數值越大，縮小比例越大。

4.line的高度問題，如果高度寫了最小高度，那麼子元素的height%就不生效了。用js去操作line的高度。

// toast.vue


mounted() )


}, // 這個計較太trick
debugger的技巧，如果眼睛觀察到的是0，但是列印出來不是0，可能就是非同步的問題。

5.增加toast的位置。

// toast.vue


props: 


}},computed:`]:true}}}


// 使用


this.$toast('你的智商需要充值', )


// plugin.js


export default )


toast.$slots.default = [message]


toast.$mount()


}}}
6.開始做如果已經有乙個toast就把之前那個乾掉，再出現。

先寫乙個函式

給函式取乙個名字

把引數提出來

// plugin.js


import toast from './toast'


let currenttoast


export default 


currenttoast = createtoast()}}}


/* helpers */


function createtoast ())


toast.$slots.default = [message]


toast.$mount()


return toast


}
7.實現動畫

宣告乙個動畫，然後寫到類上面

@keyframes fade 


100% 


} .toast
這裡有個bug,我們在實現一次的時候是有問題的,如果toast被關閉了，我們不需要重複關閉，而我們寫的是不管你之前的toast有沒有關閉，只要有值的我們就關閉，那這樣就會出現乙個問題，點了關閉currenttoast還是乙個toast並沒有把它變成null，所以要加上乙個**告訴外面，我被關了不要重複關我，**會多調一次close。

// toast.vue


close() 


// plugin.js


export default 


currenttoast = createtoast(


}) // 加了這句話}}


} /* helpers */


function createtoast ())


toast.$slots.default = [message]


toast.$mount()


toast.$on('close',onclose) // 加了這句話


return toast


}
git相關的鉤上，不想管的不用鉤上

回憶bug是如何產生的，預設樣式是:transform:translatex(-50%),進入0%時候transform:translatey(100%),它們兩會覆蓋。有三個方案，解決。

為什麼不寫兩個動畫幀來控制居中，如果一段**要背下來，那麼一定是有問題的。

優化三種動畫，上下中是不一樣的，通過css進行優化。

Vue造Toast輪子引發的思考

最近一直在不停的造vue輪子，目前已經完成了button 網格布局 預設布局 input等輪子。今天在編寫toast輪子的時候遇到了乙個問題，說一說我的思考過程，拿出來和大家分享一下，希望對大家有所幫助。在決定去造乙個輪子之前，首先要做的就是需求分析，其中最重要的一步就是你的輪子造出來之後，其他人怎...

npm發布元件 造輪子

目錄結構 由於修改了src資料夾,啟動vue專案後,找不到入口 main.js 會報錯,所以需要重新指定啟動入口 a.youngform 是乙個資料夾,下面有 dynamicform.vue 和 index b.dynamicform.vue 是元件 export default export de...

Vue造輪子 手風琴元件

一.大致的使用方法 內容2內容3 二.完成最外部的樣式 collapse三.進一步調節樣式 collapse item四.預設內容摺疊起來和點選切換，基本樣式和基本功能完成 collapse item data 五.完善功能第乙個點開,第二個就關閉mounted methods else close...