uxcore.js - React UI Component Set

组件演示

[{"title":"点击图标复制代码","id":"components-image-demo-basic","tags":[],"filepath":"site/components/image/demo/basic.md","directory":"components/image/demo","filename":"basic","meta":{"title":"点击图标复制代码","description":"\n","order":"0","filepath":"site/components/image/demo/basic.md","filename":"basic","directory":"components/image/demo","id":"components-image-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n delayRender: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n setTimeout(function () {\n _this2.setState({\n delayRender: true\n });\n }, 3000);\n }\n }, {\n key: 'render',\n value: function render() {\n var delayRender = this.state.delayRender;\n\n var tfsImage = 'https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg#a=1';\n var djangoImage = 'https://dl.django.t.taobao.com/rest/1.0/image?fileIds=IRj9SMzrT-mcifkVw_rEswAAACAAAQED&acl=43496dac05a29fe5043e2fa8283c455d&token=B1lIu_0jZUaOn3rFgnoq4wABUYAAAAFkrNL2pwAAACAAAQED&timestamp=1531982807064';\n var ossImage = 'https://alinw-oss.alicdn.com/alinw-node-admin-public-oss/2018-7-12/1531372852377/（阿里味儿首页）脱贫banner（280x180）.jpg?x-oss-process=image/resize,m_fixed,h_360,w_560';\n\n var options = {\n width: 70,\n height: 80,\n multiple: 2\n };\n\n var ossOptions = {\n width: 70,\n height: 80,\n multiple: 2,\n adapterType: 'oss'\n };\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n 'tfs adapter'\n ),\n React.createElement('img', { alt: '', src: _uxcore.Image.adapter.tfs(tfsImage, options) }),\n React.createElement(\n 'h2',\n null,\n 'django Adapter'\n ),\n React.createElement('img', { alt: '', src: _uxcore.Image.adapter.django(djangoImage, options) }),\n React.createElement(\n 'h2',\n null,\n 'oss Adapter'\n ),\n React.createElement('img', { alt: '', src: _uxcore.Image.adapter.oss(ossImage, ossOptions) }),\n React.createElement(\n 'h2',\n null,\n 'use Image Component'\n ),\n React.createElement(_uxcore.Image, {\n className: '',\n src: 'https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg',\n alt: '',\n title: '',\n lazyload: true,\n enableUrlAdapter: true,\n adapterType: 'tfs',\n height: '100px'\n }),\n React.createElement(\n 'span',\n null,\n '\\u6D4B\\u8BD5\\u5DE6\\u4FA7\\u56FE\\u7247\\u662F\\u5426\\u53EF\\u4EE5\\u5360\\u4F4D'\n ),\n React.createElement(\n 'h2',\n null,\n 'render Image after document is loaded after 3s'\n ),\n delayRender ? React.createElement(_uxcore.Image, {\n className: '',\n src: 'https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg',\n alt: '',\n title: '',\n lazyload: true,\n enableUrlAdapter: true,\n adapterType: 'tfs',\n width: '100px',\n height: '100px'\n }) : null\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-image-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Image } from 'uxcore'\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n delayRender: false,\n };\n }\n\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n delayRender: true,\n });\n }, 3000);\n }\n\n render() {\n const { delayRender } = this.state;\n const tfsImage = 'https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg#a=1';\n const djangoImage = 'https://dl.django.t.taobao.com/rest/1.0/image?fileIds=IRj9SMzrT-mcifkVw_rEswAAACAAAQED&acl=43496dac05a29fe5043e2fa8283c455d&token=B1lIu_0jZUaOn3rFgnoq4wABUYAAAAFkrNL2pwAAACAAAQED&timestamp=1531982807064';\n const ossImage = 'https://alinw-oss.alicdn.com/alinw-node-admin-public-oss/2018-7-12/1531372852377/（阿里味儿首页）脱贫banner（280x180）.jpg?x-oss-process=image/resize,m_fixed,h_360,w_560';\n\n const options = {\n width: 70,\n height: 80,\n multiple: 2,\n };\n\n const ossOptions = {\n width: 70,\n height: 80,\n multiple: 2,\n adapterType: 'oss',\n };\n\n return (\n <div>\n <h2>\n tfs adapter\n </h2>\n <img alt=\"\" src={Image.adapter.tfs(tfsImage, options)} />\n <h2>\n django Adapter\n </h2>\n <img alt=\"\" src={Image.adapter.django(djangoImage, options)} />\n <h2>\n oss Adapter\n </h2>\n <img alt=\"\" src={Image.adapter.oss(ossImage, ossOptions)} />\n <h2>\n use Image Component\n </h2>\n <Image\n className=\"\"\n src=\"https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg\"\n alt=\"\"\n title=\"\"\n lazyload\n enableUrlAdapter\n adapterType=\"tfs\"\n height=\"100px\"\n />\n \n 测试左侧图片是否可以占位\n \n <h2>\n render Image after document is loaded after 3s\n </h2>\n {\n delayRender ? (\n <Image\n className=\"\"\n src=\"https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg\"\n alt=\"\"\n title=\"\"\n lazyload\n enableUrlAdapter\n adapterType=\"tfs\"\n width=\"100px\"\n height=\"100px\"\n />\n ) : null\n }\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-image-demo-basic'));</code></pre></div><style type=\"text/css\">.demo-item {\n display: inline-block;\n width: 70px;\n height: 70px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 5px;\n background: #fafafa;\n border-radius: 3px;\n\n}\n\n.demo-item icon {\n font-size: 28px;\n}\n\n.demo-item-clipboard {\n cursor: pointer;\n display: inline-block;\n margin: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-item {\n display: inline-block;\n width: 70px;\n height: 70px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 5px;\n background: #fafafa;\n border-radius: 3px;\n\n}\n\n.demo-item icon {\n font-size: 28px;\n}\n\n.demo-item-clipboard {\n cursor: pointer;\n display: inline-block;\n margin: 10px;\n}</code></pre></div>"},"status":"public","toc":""}]

点击图标复制代码

import { Image } from 'uxcore'

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      delayRender: false,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        delayRender: true,
      });
    }, 3000);
  }

  render() {
    const { delayRender } = this.state;
    const tfsImage = 'https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg#a=1';
    const djangoImage = 'https://dl.django.t.taobao.com/rest/1.0/image?fileIds=IRj9SMzrT-mcifkVw_rEswAAACAAAQED&acl=43496dac05a29fe5043e2fa8283c455d&token=B1lIu_0jZUaOn3rFgnoq4wABUYAAAAFkrNL2pwAAACAAAQED&timestamp=1531982807064';
    const ossImage = 'https://alinw-oss.alicdn.com/alinw-node-admin-public-oss/2018-7-12/1531372852377/（阿里味儿首页）脱贫banner（280x180）.jpg?x-oss-process=image/resize,m_fixed,h_360,w_560';

    const options = {
      width: 70,
      height: 80,
      multiple: 2,
    };

    const ossOptions = {
      width: 70,
      height: 80,
      multiple: 2,
      adapterType: 'oss',
    };

    return (
      <div>
        <h2>
          tfs adapter
        </h2>
        <img alt="" src={Image.adapter.tfs(tfsImage, options)} />
        <h2>
          django Adapter
        </h2>
        <img alt="" src={Image.adapter.django(djangoImage, options)} />
        <h2>
          oss Adapter
        </h2>
        <img alt="" src={Image.adapter.oss(ossImage, ossOptions)} />
        <h2>
          use Image Component
        </h2>
        <Image
          className=""
          src="https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg"
          alt=""
          title=""
          lazyload
          enableUrlAdapter
          adapterType="tfs"
          height="100px"
        />
        <span>
          测试左侧图片是否可以占位
        </span>
        <h2>
          render Image after document is loaded after 3s
        </h2>
        {
          delayRender ? (
            <Image
              className=""
              src="https://img.alicdn.com/tfs/TB1ltSkD1GSBuNjSspbXXciipXa-300-300.jpg"
              alt=""
              title=""
              lazyload
              enableUrlAdapter
              adapterType="tfs"
              width="100px"
              height="100px"
            />
          ) : null
        }
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-image-demo-basic'));

.demo-item {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  background: #fafafa;
  border-radius: 3px;

}

.demo-item icon {
  font-size: 28px;
}

.demo-item-clipboard {
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

Props

Name	Type	Required	Default	Comments
src	string	Yes	-	图片 src
className	string	No	-	额外类名
prefixCls	string	No	-	类名前缀
style	object	No	{}	图片样式
height	number/string	No	图片高度
width	number/string	No	图片宽度
enableUrlAdapter	bool	No	开启针对 oss, django, tfs 等的图片链接优化
adapterType	string	No	可以指定针对那种类型的图片 CDN 进行优化，不指定的情况下会根据 url 去一次适配内置的链接优化器
lazyload	bool	No	true	是否懒加载，在 document load 之后再加载真实图片
defaultPic	string	No	内置图片	预置图片
showDefaultPicDelay	number	No	200	显示预置图片的延迟，如果 load 的时间小于该时间，则不加载预置图片