Web 组件源码

Web 组件源码，和自定义 React 组件的实现一致。

源码示例

js 实现

注意在 src/web/components/index.js 中要对外导出组件名同名的组件实例，例如 Button

参考示例：

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("调用组件内部方法");
          },
        },
      };
    },
    []
  );

  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 = {
  /**
   * 组件类型
   */
  type: PropTypes.oneOf(["primary", "warn", "default"]),
  /**
   * 按钮大小
   */
  size: PropTypes.oneOf(["default", "mini"]),
  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * 加载中
   */
  loading: PropTypes.bool,

  /**
   * 镂空
   */
  plain: PropTypes.bool,

  /**
   * 按钮内容
   */
  text: PropTypes.string,

  /**
   * 低码平台注入的事件触发器
   */
  events: PropTypes.objectOf(PropTypes.func),
};

/**
 * 默认属性
 */
Button.defaultProps = {
  type: "primary",
  size: "default",
};

样式配置

src/web/components/button/index.css

/* 本示例没有用到额外的样式，所以该文件为空。 */

源码参数说明

`props`

和组件配置的 data 字段对应，用户在低代码编辑器数据栏里配置的参数，会被透传到该字段内。

`props.style`

平台保留字段，用户在低代码编辑器样式栏里配置的参数，会被透传到该字段内。

`props.events`

平台保留字段，和组件配置的 events 字段对应，通过 props.events.$customevent 方法，在合适的时机触发自定义事件。

Web 组件源码

源码示例​

js 实现​

样式配置​

源码参数说明​

props​

props.style​

props.events​