造輪子 toast元件的實現下

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...

造輪子 toast元件的實現 下

Vue造Toast輪子引發的思考

npm發布元件 造輪子

Vue造輪子 手風琴元件

相關推薦

造輪子 toast元件的實現下

npm發布元件造輪子

Vue造輪子手風琴元件