http-method-selector 选择器

HTTP 方法选择器 。 显示带有常见的 http 方法的收音机按钮列表,以及使用不太常见但仍有效的方法的下拉.

它还允许定义自己的方法.

<http-method-selector method="POST" is-payload></http-method-selector>
<http-method-selector-mini method="PUT" is-payload></http-method-selector-mini>

使用量

安装

npm install --save @advanced-rest-client/http-method-selector

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/http-method-selector/http-method-selector.js';
      import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';
    </script>
  </head>
  <body>
    <http-method-selector method="POST"></http-method-selector>
    <http-method-selector-mini method="PUT"></http-method-selector-mini>

    <script>
    {
      document.querySelector('http-method-selector').onmethod = (e) => {
        console.log(e.detail.value); // or e.target.method
      };
      document.querySelector('http-method-selector').onispayload = (e) => {
        if (e.detail.value) {
          console.log('Payload is allowed');
        } else {
          console.log('Payload is not allowed');
        }
      };
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/http-method-selector/http-method-selector.js';
import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <http-method-selector
      method="POST"
      @method-changed="${this._verbHandler}"
      @ispayload-changed="${this._isPayloadHandler}"></http-method-selector>
    `;
  }

  _verbHandler(e) {
    this.httpMethod = e.target.method;
  }

  _isPayloadHandler(e) {
    this.payloadAllowed = e.detail.value;
  }
}
customElements.define('sample-element', SampleElement);

发展

git clone https://github.com/advanced-rest-client/http-method-selector
cd http-method-selector
npm install

本地运行演示

npm start

运行测试

npm test