??博主：小貓娃來啦
??文章核心：開源一個react封裝的圖片預覽組件

組件開源代碼下載地址

Gitee：點此跳轉下載
CSDN：點此跳轉下載

運行

裝依賴

npm i   

運行

npm start

打開

http://localhost:3000/

效果展示

實現(xiàn)思路

• 創(chuàng)建一個React函數(shù)組件并命名為ImageGallery。
• 在組件內部，使用useState鉤子來定義狀態(tài)變量，并初始化為合適的初始值。

selectedImageUrl來追蹤當前選中的圖片URL；
isOpen來追蹤模態(tài)框的顯示狀態(tài)；
zoomLevel來追蹤圖片的縮放級別；
rotateDeg來追蹤圖片的旋轉角度；
flipState來追蹤圖片的翻轉狀態(tài)等。

• 渲染組件時，使用map()方法遍歷傳入的圖片URL數(shù)組，并為每個元素創(chuàng)建一個縮略圖。為每個縮略圖添加點擊事件處理函數(shù)，以便在點擊時更新selectedImageUrl和isOpen的狀態(tài)。
• 在模態(tài)框中，根據(jù)isOpen的狀態(tài)決定是否顯示模態(tài)框。如果isOpen為真，則顯示模態(tài)框。
• 在模態(tài)框中，顯示選中的大圖。根據(jù)zoomLevel和rotateDeg應用相應的樣式來縮放和旋轉圖片。

使用CSS的transform屬性來實現(xiàn)縮放和旋轉效果。

• 在模態(tài)框中，添加放大、縮小、旋轉和翻轉的功能按鈕。為每個按鈕添加點擊事件處理函數(shù)，以便在點擊時更新相應的狀態(tài)變量，如zoomLevel、rotateDeg和flipState。
• 為模態(tài)框添加鍵盤事件監(jiān)聽。根據(jù)按下的鍵碼來觸發(fā)不同的操作，例如切換圖片、放大縮小等功能。
• 實現(xiàn)拖拽功能，通過鼠標事件監(jiān)聽鼠標按下、移動和松開的過程，在對應的事件處理函數(shù)中計算鼠標位移距離，并更新圖片的位置。
• 添加全屏展示功能。為模態(tài)框添加全屏按鈕，并在點擊時調用瀏覽器的Fullscreen API來進入或退出全屏模式。

使用思路和api

我覺得react沒有順手的圖片預覽組件，然后就自己封裝一個，放在項目文件里，自己本地導入使用，需要微調。也不用擔心組件之間的高耦合度，自己也可以控制。

API全部在代碼里，手動微調即可。

實現(xiàn)的功能

拖拽，上下左右翻轉、旋轉，全屏，縮放，縮略圖高亮
具體描述如下，縮放級別等數(shù)據(jù)可以自己改。在哪里改，都有注釋，非常清晰

• 點擊縮略圖可以在模態(tài)框中展示選中的圖片，并帶有高亮。
• 可以放大和縮小圖片，最大放大到130%，最小縮小到30%。
• 可以旋轉圖片，左旋轉和右旋轉分別是每次旋轉90度。
• 可以上下翻轉和水平翻轉圖片，點擊按鈕可以進行翻轉和恢復默認狀態(tài)。
• 可以使用鍵盤的箭頭鍵進行上一張和下一張圖片的切換，同時也支持使用鍵盤的上下箭頭進行放大和縮小。
• 可以通過拖拽圖片進行位置的調整，鼠標按下開始拖拽，松開結束拖拽。
• 可以進入全屏模式查看圖片，再次點擊退出全屏。
• 在模態(tài)框中顯示縮略圖，點擊縮略圖可以切換到相應的圖片。

數(shù)據(jù)和入口

數(shù)據(jù)是在APP.jsx里的data，可以換成接口請求到的圖片數(shù)組
數(shù)據(jù)入口是在APP.jsx里的<ImagePreview images={images}></ImagePreview>標簽上，這個images就是data這個圖片數(shù)組

部分代碼展示

?????css

?????jsx

文章來源地址http://www.zghlxwxcb.cn/news/detail-686332.html

到了這里，關于前端（十五）——開源一個用react封裝的圖片預覽組件的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！