@gf-ui/components/dist/collection/components/gf-button/gf-button.js

跨框架核心库

import { Component, Host, h, Prop, Watch, Method, Event } from '@stencil/core';
import { getButtonColor, getButtonStyle } from "./_button";
export class GfButton {
  constructor() {
    this.color = "default"; // 按钮颜色
    this.disabled = false; // 禁用
    this.textColor = "#FFFFFF"; // 文字颜色
    this.classNames = ""; // 自定义类名
    this.plain = false; // 朴素按钮
    this.size = ""; // 大 中 小
    this.circle = false; // 圆形
    this.nativeType = 'button'; // 原生类型
  }
  componentWillLoad() {
    console.log('lifecycle load');
  }
  changeDisabled(newValue, oldValue) {
    console.log('[watch]--改变disabled状态', newValue, oldValue);
  }
  async _internal() {
    console.log('外部调用内部方法');
  }
  handClick() {
    if (this.disabled)
      return;
    this.displayOnClick.emit({
      data: {
        eventName: 'on-click',
        componentsName: "gf-button"
      }
    });
  }
  render() {
    return (h(Host, null,
      h("button", { onClick: this.handClick.bind(this), type: this.nativeType, class: `gf-button 
                        ${this.classNames} 
                        ${getButtonColor(this.color)} 
                        ${this.disabled ? 'is-disabled' : ''}
                        ${this.plain && "is-plain" || ''}
                        ${this.circle && "is-circle" || ''}
                        ${this.size && 'gf-button--' + this.size || ''}
                    `, style: getButtonStyle(this.color, this.textColor) },
        h("slot", { name: 'icon-left' }),
        h("slot", null),
        h("slot", { name: 'icon-right' }))));
  }
  static get is() { return "gf-button"; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonColor",
        "resolved": "\"danger\" | \"default\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
        "references": {
          "ButtonColor": {
            "location": "import",
            "path": "../../types/gf-button"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": false,
      "defaultValue": "\"default\""
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "text-color",
      "reflect": false,
      "defaultValue": "\"#FFFFFF\""
    },
    "classNames": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "class-names",
      "reflect": false,
      "defaultValue": "\"\""
    },
    "plain": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "plain",
      "reflect": false,
      "defaultValue": "false"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonSize",
        "resolved": "\"\" | \"large\" | \"small\" | \"smaller\"",
        "references": {
          "ButtonSize": {
            "location": "import",
            "path": "../../types/gf-button"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "\"\""
    },
    "circle": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "circle",
      "reflect": false,
      "defaultValue": "false"
    },
    "nativeType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "native-type",
      "reflect": false,
      "defaultValue": "'button'"
    }
  }; }
  static get events() { return [{
      "method": "displayOnClick",
      "name": "on-click",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ data: Object }",
        "resolved": "{ data: Object; }",
        "references": {
          "Object": {
            "location": "global"
          }
        }
      }
    }]; }
  static get methods() { return {
    "_internal": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get watchers() { return [{
      "propName": "disabled",
      "methodName": "changeDisabled"
    }]; }
}