ps-frame-father/es/components/Skeleton/index.js

An enterprise-class UI design language and React components implementation

import React from "react";
import PropTypes from 'prop-types';
import CodeImg from '../../assets/code_white.png';
import "./index.css";
/**
 * 骨架屏组件(SEO)
 * 
 */

export default function Skeleton(props) {
  var _props$isLoading = props.isLoading,
      isLoading = _props$isLoading === void 0 ? true : _props$isLoading,
      _props$loadingText = props.loadingText,
      loadingText = _props$loadingText === void 0 ? '正在为您疯狂加载...' : _props$loadingText;
  return isLoading ? /*#__PURE__*/React.createElement("div", {
    className: "skeletonWrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "skeletonContent",
    "data-loadingText": loadingText
  }, /*#__PURE__*/React.createElement("div", {
    className: "imgBox"
  }, /*#__PURE__*/React.createElement("img", {
    src: CodeImg,
    alt: "\u8DA3\u8C08\u524D\u7AEF,\u5B66\u524D\u7AEF\u5B66React"
  })), /*#__PURE__*/React.createElement("div", {
    className: "rightBox"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "tit"
  }, "\u8DA3\u8C08\u524D\u7AEF@ps\u7684Blog"), /*#__PURE__*/React.createElement("div", {
    className: "labelWrap"
  }, /*#__PURE__*/React.createElement("span", null, "\u524D\u7AEF"), /*#__PURE__*/React.createElement("span", null, "\u524D\u7AEF\u6846\u67B6"), /*#__PURE__*/React.createElement("span", null, "\u524D\u7AEF\u9762\u8BD5"), /*#__PURE__*/React.createElement("span", null, "\u524D\u7AEF\u804C\u4E1A\u53D1\u5C55\u89C4\u5212"), /*#__PURE__*/React.createElement("span", null, "React/Vue/Jquery"), /*#__PURE__*/React.createElement("span", null, "\u524D\u7AEF\u5DE5\u7A0B\u5316/\u53EF\u89C6\u5316")), /*#__PURE__*/React.createElement("p", {
    className: "desc"
  }, "\u8DA3\u8C08\u524D\u7AEF\u4F5C\u4E3A\u7B14\u8005\u5F00\u521B\u7684\u7B2C\u4E00\u4E2A\u4E13\u680F,\u4E3B\u8981\u7528\u6765\u603B\u7ED3\u7B14\u8005\u5728\u591A\u5E74\u524D\u7AEF\u5DE5\u4F5C\u4E2D\u79EF\u7D2F\u7684React,Vue, Node, javascript, CSS, \u8BBE\u8BA1\u6A21\u5F0F,\u5DE5\u7A0B\u5316\u7684\u5B9E\u6218\u7ECF\u9A8C,\u4F5C\u4E3A\u4E00\u540D\u4E00\u7EBF\u7684\u67B6\u6784\u5E08\u548C\u9762\u8BD5\u5B98, \u4E5F\u4F1A\u603B\u7ED3\u4E00\u4E9B\u524D\u7AEF\u7684\u9762\u8BD5\u7ECF\u9A8C\u548C\u804C\u4E1A\u601D\u8003\u548C\u89C4\u5212.")))) : null;
}
Skeleton.propTypes = {
  isLoading: PropTypes.bool,
  loadingText: PropTypes.string
};