一個還算優雅的 react 圖片組件

寫了一個還算優雅的圖片組件
mult-transition-image-view

截圖：

前言

發現項目中的圖片佔位模塊寫得很不優雅，
找了一圈，發現沒找到本身想要的圖片組件。
因而本身寫了一個。

功能簡介

首先它是一個比較優雅的組件：用起來不頭疼。
第二個它能實現如下場景：

1. 沒有圖片的時候，顯示一個佔位圖（能夠直接用css來寫背景，方便自定義）
2. 但願在加載大圖的時候，能先佔位一張小圖，而後再過渡到一張大圖。相似上面的截圖。

使用方法

安裝npm 包

npm install react-mult-transition-image-view

代碼部分

import ImageBoxView from 'react-mult-transition-image-view'

    <ImageBoxView img="#你的圖片#"/>

固然 你能夠設置其餘屬性

<ImageBoxView
        width="320"    // 
        height="200"   // 寬高，會轉化成 style 屬性
        mode="style"   // 使用 style 去顯示圖片（默認:img）
        img="#你要的圖片#"/>  // 圖片路徑

小圖過渡到大圖的效果

<ImageBoxView
        animate="fade" // 會觸發動畫樣式(見下方樣式部分 )
        mode="style"   // 使用 style 去顯示圖片（默認:img）
        img={['#小圖地址#', '#大圖地址#']}/>  // img 傳入數組形式。

實現隨機顯示圖片

當有不少圖片的時候，能夠讓圖片隨機時間顯示，增長圖片顯示出來的體驗
（一塊兒出來真的有點醜）

<ImageBoxView
        delay="100"    // 延遲加載（默認：0），能夠傳入一個隨機數
        img="#你要的圖片#"/>  // 圖片路徑

幻燈片效果

由於 img 屬性能夠傳入數組，因此 理論上能夠加載不少圖，實現幻燈片效果。
使用 wait 屬性 來設置，每張圖片加載後的等待時間

<ImageBoxView
        animate="fade" // 會觸發動畫樣式(見下方樣式部分 )
        wait="100"     // 每張圖片加載完後，繼續加載下一張的時間（默認：0）
        mode="style"   // 使用 style 去顯示圖片（默認:img）
        img={['#圖片1#', '#圖片2#', '#圖片3#']}/>  // img 傳入數組形式。

樣式部分

別忘了樣式部分

.c-img-box{
    display:inline-block;
    width: 320px;
    height: 200px;
    background: #f7f6f5;
    position: relative;
    .img-hold{
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        img{
            width:100%;
            height:100%;
        }
        &.img-animate{
            transition: opacity 0.5s;
        }
    }
    
    .img-cover{
        background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
        background-color:#f0f0f0;
    }
    
    .img-cover,
    .img-hold,
    .img-hide{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }
    
    .img-hide{
        opacity: 0;
    }
    
}

TODO

喜歡的就給個 star

github: https://github.com/qilei0529/react-mult-transition-image-view