react骨架屏

時間 2019-11-30

標籤 react 骨架欄目 React 简体版

原文原文鏈接

ehome-react-skeleton

一個能夠自動生成react骨架屏的webpack loader.react

起始

菊花的loading圖太low，骨架屏更美觀。公司UI不肯意爲設計骨架屏圖片（在一個小公司，UI也比較少）！後來我想了一下能不能經過webpack自動生成骨架屏，有了這個想法以後我就開始動手設計了,發現是可行因此初步寫了一個loader 固然還只是個初始版本還有不少優化和改進的部分.最近這段時間比較忙，過了這段時間我會加以優化和改善輸出一個穩定的版本。webpack

安裝

cnpm i ehome-react-skeleton --savegit

配置

{
    test:/\.(js|jsx)$/,
    include:paths.src,
    use:[
        {
            loader: require.resolve("babel-loader"),
            options: {
                "presets": [
                    "react-app"
                ]
            }
        },
        {
            loader:require.resolve("ehome-react-skeleton")  // 在babel-loader以前配置ehome-react-skeleton
        }
    ]

}
複製代碼

使用

demo1github

import React from "react";
import ReactDom from "react-dom";
import "./index.less";

const prefix = "eh-home";
export default class Skeleton extends React.Component {

  componentWillMount() {
    this.setState({
      ownerHotLines: [{
        description: "中國人民",
        name: "leiwuyi",
        contact: "15999650670"

      }]

    });
  }
  render() {
    const { state, props } = this;
    return (
        <div className={`${prefix}-ownerservice`}>
            <div>
                {state.ownerHotLines.map(hotline => {
                  return <div className={`${prefix}-ownerservice`} SKELETON>
                            <div className="block">
                                <div className="block-avatar">
                                    <img  />
                                </div>
                                <div className="block-content">
                                    <div className="block-content-title">
                                       中國人民
                                    </div>
                                    <div className="block-content-contact">
                                        <span style={{ marginRight: 20 }}>leiwuyi</span>15999650670
                                    </div>
                                </div>
                                <div className="block-message"></div>
                                <div className="block-phone"><a href="15999650670"></a></div>
                            </div>
                        </div>
                    })}
            </div>
            {SKELETON}
        </div>;
    )   
  }
}
複製代碼

demo2web

import React from "react";
import ReactDom from "react-dom";
import "./index.less";       //必需要有

const prefix = "eh-record";
export default class Record extends React.Component {

  componentWillMount() {

  }
  render() {
    const { state, props } = this;
    return <div className={`${prefix}`}>
                <div className={`${prefix}-block`} SKELETON>   // (1)
                    <div className={`${prefix}-block-header`}>
                        <div>複印</div>
                        <div>已支付</div>
                    </div>
                    <div className={`${prefix}-block-date`}>
                        2012-2-08
                    </div>
                    <div className={`${prefix}-block-filemsg`}>
                        <div>我問問.word</div>
                        <div>￥0.2</div>
                    </div>
                </div>
                {SKELETON}   
            </div>;
  }
複製代碼