{"id":14973822,"url":"https://github.com/aisuda/amis-widget","last_synced_at":"2025-08-05T22:24:02.901Z","repository":{"id":40342484,"uuid":"442151163","full_name":"aisuda/amis-widget","owner":"aisuda","description":"amis组件注册器（支持react、vue2.0、vue3.0和jQuery技术栈），主要用于注册amis渲染器、amis-editor插件。","archived":false,"fork":false,"pushed_at":"2024-02-28T10:27:30.000Z","size":57980,"stargazers_count":100,"open_issues_count":5,"forks_count":41,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-10T01:12:22.332Z","etag":null,"topics":["amis","amis-editor","react","vue2","vue3"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aisuda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-27T12:15:04.000Z","updated_at":"2025-03-29T13:13:38.000Z","dependencies_parsed_at":"2024-06-18T18:14:09.088Z","dependency_job_id":"22e181ac-8121-434d-bfe4-dfd78fc5679d","html_url":"https://github.com/aisuda/amis-widget","commit_stats":{"total_commits":121,"total_committers":2,"mean_commits":60.5,"dds":0.008264462809917328,"last_synced_commit":"dc5c60b4c67ea691dde8d823664abb6ba2184566"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aisuda%2Famis-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aisuda%2Famis-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aisuda%2Famis-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aisuda%2Famis-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aisuda","download_url":"https://codeload.github.com/aisuda/amis-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137890,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amis","amis-editor","react","vue2","vue3"],"created_at":"2024-09-24T13:49:27.918Z","updated_at":"2025-04-10T01:12:28.211Z","avatar_url":"https://github.com/aisuda.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# amis-widget\n\u003e 开发amis自定义组件的工具集（支持react、vue2.0和jQuery技术栈）\n- 提供注册amis组件和amis-editor插件的方法；\n- 目前支持的技术栈：jQuery、vue2、react，vue3.0技术栈在[vue3-amis-widget](https://github.com/aisuda/amis-widget/tree/feat-vue3)中支持；\n- 支持的amis渲染器类型：renderer（amis普通渲染器）、formitem（amis表单渲染器）、options（amis表单控件渲染器）。\n\n### 提供的方法\n- registerRendererByType: 根据type类型注册 amis普通渲染器、amis表单渲染器、amis表单控件渲染器\n- registerAmisEditorPlugin: 注册 amis-editor 插件\n\n### amis-widget 3.0 版本依赖说明\n- 2.0 版本支持 amis 和 amis-editor 的任何版本；\n- 3.0.0 以上版本需要 amis 2.5.2-beta.0 以上版本， amis-editor 5.2.1-beta.32 以上版本。\n\n### 在线Demo\n[点击访问在线Demo](https://aisuda.github.io/amis-widget/test/preview.html)\n\n## 快速使用\n\n```\nnpm install --save amis-widget\n```\n\n## 注册amis组件\n```tsx\nimport { registerRendererByType } from 'amis-widget';\nclass MyReactSelect extends React.PureComponent {\n  constructor() {\n    super();\n    this.handleChange = this.handleChange.bind(this);\n  }\n\n  handleChange(event) {\n    // 调用amis onToggle 方法，变更选择器表单项值\n    const {onToggle, options} = this.props;\n    const option = options.find(o =\u003e o.value === event.target.value);\n    if (onToggle) {\n      onToggle(option);\n    }\n  }\n\n  render() {\n    // 获取表单项 value 和 options 属性\n    const {label, options, title} = this.props;\n\n    return (\n      \u003cdiv className=\"react-select\"\u003e\n        \u003cspan\u003e\n          {label}：\n        \u003c/span\u003e\n        \u003cselect onChange={this.handleChange} title={title}\u003e\n          {options.map(option =\u003e (\n            \u003coption key={option.value} value={option.value}\u003e\n              {option.label}\n            \u003c/option\u003e\n          ))}\n        \u003c/select\u003e\n      \u003c/div\u003e\n\n    );\n  }\n}\n// 注册amis普通渲染器\nregisterRendererByType(MyReactSelect, {\n  type: 'react-select',\n  usage: 'renderer', // formitem: amis表单渲染器、options: amis表单控件渲染器\n  weight: 100,\n  framework: 'react' // 技术栈类型\n});\n\nexport default MyReactSelect;\n```\n\n## 注册amis-editor插件\n```tsx\nimport { registerAmisEditorPlugin } from 'amis-widget';\n\nclass ReactSelectPlugin {\n  rendererName = 'react-select'; // 对应的amis渲染器\n  $schema = '/schemas/UnkownSchema.json';\n  name = 'react-select';\n  description = 'react-select';\n  tags = ['展示']; // 自定义组件分类\n  icon = 'fa fa-file-code-o';\n  order = 100; // 组件面板中的展示优先级，越小越靠前展示\n  scaffold = { // 插入到页面时需要\n    type: 'react-select',\n    label: 'react-select',\n    name: 'react-select',\n    options: [\n      {\n        label: 'A',\n        value: 'a'\n      },\n      {\n        label: 'B',\n        value: 'b'\n      },\n      {\n        label: 'C',\n        value: 'c'\n      }\n    ]\n  };\n  previewSchema = { // 组件面板预览时需要\n    type: 'react-select',\n    label: 'react-select',\n    options: [\n      {\n        label: 'A',\n        value: 'a'\n      },\n      {\n        label: 'B',\n        value: 'b'\n      },\n      {\n        label: 'C',\n        value: 'c'\n      }\n    ]\n  };\n  panelTitle = '下拉框'; // 右侧属性面板Title\n  panelBody = [ // 右侧属性面板配置项\n    {\n      type: 'input-text',\n      name: 'label',\n      label: 'label',\n      value: 'react-select'\n    },\n    {\n      type: 'textarea',\n      name: 'title',\n      label: 'hover title',\n      value: '点击下拉选择数值'\n    },\n    {\n      type: 'tpl',\n      tpl: '备注：可根据变量 \\\\${amisUser} 获取用户数据。'\n    }\n  ];\n}\n// 注册一个amis-editor插件（仅页面设计器需要，会在自定义组件面板中展示）\nregisterAmisEditorPlugin(ReactSelectPlugin);\n\nexport default ReactSelectPlugin;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faisuda%2Famis-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faisuda%2Famis-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faisuda%2Famis-widget/lists"}