360°玩轉tips，你須要這個組件

web端但凡涉及到用戶輸入回顯情景的時候，老是不可避免的會出現用戶輸入過長顯示不完整的狀況，雖然UI庫會提供tips組件，可是當頁面tips過多時，須要添加大量額外的dom元素，而且須要包裹在每一個要顯示tips的元素上，這顯然是很是不友好的。

那麼問題來了，什麼樣的tips能夠開箱即用，要麼自動出如今顯示不完整的地方，要麼在元素上加個屬性就能夠展現呢？

本着造輪子的精神，寫下了這個組件。

使用

一、全局引入，在入口文件中引入->安裝->使用(推薦)

二、局部引入，一個蘿蔔一個坑，哪裏須要往哪裏裝。

插件地址胡鄒鄒的tips組件

使用demo胡鄒鄒的tips demo

參數

參數名	參數值	效果
show-tips	-	界定是否須要用到tips，只有具備這個屬性的元素會觸發tips的顯示與否
isShow	-	強制顯示tips，tips內容爲data-tips屬性值(推薦)，不然爲innerHTML
direction	toUp	控制tips方向爲向上顯示，默認值
	toDown	向下顯示
	toLeft	向左顯示
	toRight	向右顯示
data-tips	文本	tips要展現的內容，能夠爲html標籤
zhl-tips-max-width	100px等寬度值	控制tips顯示的最大寬度，默認200px

FAQ

一、什麼樣的元素須要展現tips？

① 把tips內容看成補充說明的；

② 元素內容展現不完整，超出打點的；

爲了隔離一些徹底不可能出現tips的元素，使用show-tips做爲tips出現的先決條件；

二、tips如何實現全局監聽？

① 爲body元素綁定事件委託，使用addEventListener方法；

② 監聽body全部子元素鼠標移入mouseover事件，不能使用mouseenter和mousemove，區別可見胡鄒鄒的紅寶書

注意在組件銷燬的時候須要同步解綁委託的事件，使用removeEventListener方法；

三、tips位置？

① 使用絕對定位(全局使用)或固定定位(局部使用)，設置展現層級；

② 推薦使用getBoundingClientRect方法獲取元素相對視口的距離，實測兼容ie、chrome、firefox；

寫在最後

做爲一個不怎麼關注新聞的人最近也開始下了微博時刻關注武漢的狀況。過去非典年紀尚小，印象裏只有板藍根和難喝的中藥，沒想到此次新型肺炎離我這麼近，我在武漢讀書四年、工做一年半，甚至從未想過離開武漢去其餘的城市發展。武漢封城前一天回的老家，自行在家隔離，此刻深深感覺到本身力量的眇小，能作的僅僅是不造謠不傳謠，轉發央視新聞以引發家人的重視，無論家人能不能理解，這個春節堅定不走親訪友。

但願疫情趕忙獲得控制，但願武漢挺過來，但願歸期不遠。