# amis-widget

> amis组件注册器（支持react、vue2.0、vue3.0和jQuery技术栈），主要用于注册amis渲染器、amis-editor插件。

Latest version **3.2.2** (published 2024-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install amis-widget
pnpm add amis-widget
yarn add amis-widget
bun add amis-widget
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.2 |
| Published | 2024-02-28 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 3 |
| Unpacked size | 49.3 KB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| Author | fex |
| Maintainers | fis-dev, wibetter |
| Keywords | amis组件注册器, amis自定义组件, amis-editor自定义插件 |

## Links

- npm: https://www.npmjs.com/package/amis-widget
- Repository: https://git@github.com/aisuda/amis-widget
- Homepage: https://github.com/aisuda/amis-widget#readme
- Issues: https://github.com/aisuda/amis-widget/issues
- npm.io page: https://npm.io/package/amis-widget

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [axios](https://npm.io/package/axios.md) ^0.24.0
- [jquery](https://npm.io/package/jquery.md) ^3.5.1

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 3.2.2 (latest) — 2024-02-28
- 3.2.1 — 2023-11-22
- 3.2.0 — 2023-06-16
- 3.1.0 — 2023-03-09
- 3.0.9 — 2023-02-16
- 3.0.8 — 2023-02-09
- 3.0.7 — 2023-02-08
- 3.0.6 — 2022-12-07
- 3.0.5 — 2022-12-07
- 3.0.3 — 2022-12-06
- 3.0.2-beta.2 — 2022-12-06
- 3.0.2-beta.1 — 2022-12-06
- 3.0.2 — 2022-12-06
- 3.0.1 — 2022-12-05
- 3.0.0 — 2022-12-05
- … 37 more at https://npm.io/package/amis-widget/versions

## README

# amis-widget
> 开发amis自定义组件的工具集（支持react、vue2.0和jQuery技术栈）
- 提供注册amis组件和amis-editor插件的方法；
- 目前支持的技术栈：jQuery、vue2、react，vue3.0技术栈在[vue3-amis-widget](https://github.com/aisuda/amis-widget/tree/feat-vue3)中支持；
- 支持的amis渲染器类型：renderer（amis普通渲染器）、formitem（amis表单渲染器）、options（amis表单控件渲染器）。

### 提供的方法
- registerRendererByType: 根据type类型注册 amis普通渲染器、amis表单渲染器、amis表单控件渲染器
- registerAmisEditorPlugin: 注册 amis-editor 插件

### amis-widget 3.0 版本依赖说明
- 2.0 版本支持 amis 和 amis-editor 的任何版本；
- 3.0.0 以上版本需要 amis 2.5.2-beta.0 以上版本， amis-editor 5.2.1-beta.32 以上版本。

### 在线Demo
[点击访问在线Demo](https://aisuda.github.io/amis-widget/test/preview.html)

## 快速使用

```
npm install --save amis-widget
```

## 注册amis组件
```tsx
import { registerRendererByType } from 'amis-widget';
class MyReactSelect extends React.PureComponent {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    // 调用amis onToggle 方法，变更选择器表单项值
    const {onToggle, options} = this.props;
    const option = options.find(o => o.value === event.target.value);
    if (onToggle) {
      onToggle(option);
    }
  }

  render() {
    // 获取表单项 value 和 options 属性
    const {label, options, title} = this.props;

    return (
      <div className="react-select">
        <span>
          {label}：
        </span>
        <select onChange={this.handleChange} title={title}>
          {options.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

    );
  }
}
// 注册amis普通渲染器
registerRendererByType(MyReactSelect, {
  type: 'react-select',
  usage: 'renderer', // formitem: amis表单渲染器、options: amis表单控件渲染器
  weight: 100,
  framework: 'react' // 技术栈类型
});

export default MyReactSelect;
```

## 注册amis-editor插件
```tsx
import { registerAmisEditorPlugin } from 'amis-widget';

class ReactSelectPlugin {
  rendererName = 'react-select'; // 对应的amis渲染器
  $schema = '/schemas/UnkownSchema.json';
  name = 'react-select';
  description = 'react-select';
  tags = ['展示']; // 自定义组件分类
  icon = 'fa fa-file-code-o';
  order = 100; // 组件面板中的展示优先级，越小越靠前展示
  scaffold = { // 插入到页面时需要
    type: 'react-select',
    label: 'react-select',
    name: 'react-select',
    options: [
      {
        label: 'A',
        value: 'a'
      },
      {
        label: 'B',
        value: 'b'
      },
      {
        label: 'C',
        value: 'c'
      }
    ]
  };
  previewSchema = { // 组件面板预览时需要
    type: 'react-select',
    label: 'react-select',
    options: [
      {
        label: 'A',
        value: 'a'
      },
      {
        label: 'B',
        value: 'b'
      },
      {
        label: 'C',
        value: 'c'
      }
    ]
  };
  panelTitle = '下拉框'; // 右侧属性面板Title
  panelBody = [ // 右侧属性面板配置项
    {
      type: 'input-text',
      name: 'label',
      label: 'label',
      value: 'react-select'
    },
    {
      type: 'textarea',
      name: 'title',
      label: 'hover title',
      value: '点击下拉选择数值'
    },
    {
      type: 'tpl',
      tpl: '备注：可根据变量 \\${amisUser} 获取用户数据。'
    }
  ];
}
// 注册一个amis-editor插件（仅页面设计器需要，会在自定义组件面板中展示）
registerAmisEditorPlugin(ReactSelectPlugin);

export default ReactSelectPlugin;
```

---
_Source: https://npm.io/package/amis-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._