react骨架屏

ehome-react-skeleton

一个可以自动生成react骨架屏的webpack loader.

起始

菊花的loading图太low，骨架屏更美观。公司UI不愿意为设计骨架屏图片（在一个小公司，UI也比较少）！后来我想了一下能不能通过webpack自动生成骨架屏，有了这个想法之后我就开始动手设计了,发现是可行所以初步写了一个loader 当然还只是个初始版本还有很多优化和改进的部分.最近这段时间比较忙，过了这段时间我会加以优化和改善输出一个稳定的版本。

安装

cnpm i ehome-react-skeleton --save

配置

{
    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
        }
    ]

}
复制代码

使用

demo1

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>;
    )   
  }
}
复制代码

demo2

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>;
  }
复制代码

1. index.less文件
2. div上的SKELETON标记的为skeleton模板
3. 模板将替换{SKELETON}

效果

结尾

github地址: 这里