馬上月底了, 這個月忙於工作和生活, 沒有很好的寫一篇博客, 有點憂傷. 為了彌補, 就寫點簡單的.
最近項目有個需求, 就是鼠標移入的時候顯示一個層, 移除的時候這個層消失. 當然層是可以點擊進行額外操作的.
項目用的是react,最開始使用的是mounseenter和mounseleave事件, 結果吧出現了點擊進入另外一個路由后,再次點擊回來后, 鼠標在元素上, 確沒有再出現浮層. 這就有尷尬了.
當時還想用的是事件, 但想想現在css3鼠標事件, 動畫, 偽類選擇器這么成熟了. 額外去搜素了解了一下, 自己似乎以前看到過相關文章.
后來發現hover這個偽類 確實可以是比較帥. 當然只能控制子元素(大家這么說, 我等有時間還是好好琢磨琢磨).
基本實現蒙層, 就是蒙層設置為絕對定位, 默認是隱藏, hover的時候,顯示出來,基本就是這樣. mounseenter和mounseleave的防范, 你很快的移動的時候, 總是會有點莫名的問題出來. 這個簡直就是救星一個了.
代碼基本結構就是如此了.
<style type="text/css">
.container{
width:400px;height:200px;
background-color: blueviolet
}
.layer{
background-color:#8bb907;
display:none;
height: 100%;
width: 100%;
text-align: center;
}
.container:hover .layer{display:block;}
</style>
<body>
<div class="container">
<div class="layer">
<a href="http://www.baidu.com">百度</a>
</div>
</div>
</body>
另外一個就是img默認圖片加載失敗的問題, 我開始很自信的寫下了
<img src={item.src|| 'http://xxxxxx.png'} alt="美女圖片"/>
結果你會發現, src地址不正確或者加載失敗的時候就愣是尷尬了, 怎么辦,
如下就是更好的方案,如果加載失敗,就顯示默認的.
<img src={item.src} alt="美女圖片" onError={ev=>ev.target.src= "htpp://xxxxx.png"} />
有人說, 哦, 如此啊, 其實還沒完. 如果你的默認圖片失敗了怎么辦, 是不是一直在重復加載呢. 哈哈, 明白了吧.
另外再添加一個, ctrl + click 會把鏈接地址新窗口打開. 這本身沒啥問題,我們項目本身是一個SPA的應用結合electron. 通過react-router來實現多頁面.
而react-router實現路由的原理就是a標簽. 這就尷尬了.
ctrl + click會彈出新窗口, 這............, 不要慌.
preJudgment = ev => {
// ctrl + 左鍵
return ev.ctrlKey && ev.button === 0 && ev.preventDefault()
}
<NavLink exact onClick={this.preJudgment} to={'/path'}></a>
如上就能解決問題, 雖然官網NavLink並沒有提供這onClick的說明.
基本的思路就是判斷是不是按下 ctrl + 鼠標左鍵, 組件默認行為.
為了更加保險, 你可以electron監聽窗口打開事件, 多重保險.