ehome-react-skeleton

один может быть сгенерирован автоматическиreactкаркасный экранwebpack loader.

Начало

хризантемаloadingКартинка слишком низкая, каркасный экран красивее. Пользовательский интерфейс компании неохотно проектирует скелетные изображения экрана (в небольшой компании меньше пользовательского интерфейса)! Тогда я подумал, смогу ли я пройти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помечен как шаблон скелета
3. шаблон заменит {SKELETON}

Эффект

конец

githubадрес:здесь