[JavaScript知识库]1SC@SDUSC amis-低代码前端框架代码分析十

代码分析

class ColorField extends react_1.default.Component {
      render() {
          const { className, classnames: cx, defaultColor, showValue } = this.props;
          const color = (0, helper_1.getPropValue)(this.props);
          return (react_1.default.createElement("div", { className: cx('ColorField', className) },
              react_1.default.createElement("i", { className: cx('ColorField-previewIcon'), style: { backgroundColor: color || defaultColor } }),
              showValue ? (react_1.default.createElement("span", { className: cx('ColorField-value') }, color)) : null));
      }
  }
  exports.ColorField = ColorField;
  ColorField.defaultProps = {
      className: '',
      defaultColor: '#ccc',
      showValue: true
  };
  let ColorFieldRenderer = class ColorFieldRenderer extends ColorField {
  };
  ColorFieldRenderer = (0, tslib_1.__decorate)([
      (0, factory_1.Renderer)({
          type: 'color'
      })
  ], ColorFieldRenderer);
  exports.ColorFieldRenderer = ColorFieldRenderer;

定义了颜色块属性，来显示颜色块

总结

设置颜色块以区分状态