Skip to main content

Web Component Source Code

The Web component source code is consistent with the implementation of custom React components.

Source Code Example​

js Implementation​

Note that in src/web/components/index.js, you must export a component instance with the same name as the component, for example, Button.

Refer to the example:

src/web/components/button/index.js
import * as React from "react";
import * as PropTypes from "prop-types";
import "weui";
import "./index.css";

export default React.forwardRef(function Button(props, ref) {
  const {
    text,
    size = "default",
    type = "primary",
    loading = false,
    disabled = false,
    plain = false,
    events,
    titleSlot,
    ...rest
  } = props;

  React.useImperativeHandle(
    ref,
    () => {
      return {
        methods: {
          innermethod: () => {
            console.log("Call the component internal method");
          },
        },
      };
    },
    []
  );

  return (
    <button
      type={type}
      size={size === "mini" ? "small" : "normal"}
      disabled={disabled}
      plain={plain}
      onClick={events.customevent}
      {...rest}
    >
      {loading && <i className="weui-loading" />}
      {text || titleSlot}
    </button>
  );
});

Button.propTypes = {
  /**
   * Component Type
   */
  type: PropTypes.oneOf(["primary", "warn", "default"]),
  /**
   * Button Size
   */
  size: PropTypes.oneOf(["default", "mini"]),
  /**
   * Whether to disable
   */
  disabled: PropTypes.bool,

  /**
   * Loading
   */
  loading: PropTypes.bool,

  /**
   * Hollow
   */
  plain: PropTypes.bool,

  /**
   * Button Content
   */
  text: PropTypes.string,

  /**
   * Event triggers injected by the low-code platform
   */
  events: PropTypes.objectOf(PropTypes.func),
};

/**
 * Default Property
 */
Button.defaultProps = {
  type: "primary",
  size: "default",
};

Style Configuration​

src/web/components/button/index.css
/* This example does not use additional styles, so this file is empty. */

Source Code Parameter Description​

props​

Corresponds to the data field in Component Configuration. Parameters configured by users in the Data panel of the low-code editor will be passed through to this field.

props.style​

Platform reserved field. Parameters configured by users in the Style panel of the low-code editor will be passed through to this field.

props.events​

Platform reserved field. Corresponds to the events field in Component Configuration. Trigger custom events at the appropriate time via the props.events.$customevent method.