p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
amis/gh-pages/docs/custom_eb35831.js

80 lines
63 KiB
JavaScript
Raw Normal View History

更新 gh-pages
2020-07-20 18:12:43 +08:00
amis.define('docs/custom.md', function(require, exports, module, define) {
更新 gh-pages
2020-06-08 19:02:21 +08:00
module.exports = {
"title": "定制功能",
"html": "<p>如果默认的组件不能满足需求，可以通过定制组件来进行扩展，在 amis 中有两种方法：</p>\n<ol>\n<li>临时扩展，适合无需复用的组件。</li>\n<li>注册自定义类型，适合需要在很多地方复用的组件。</li>\n</ol>\n<blockquote>\n<p>注意，扩展只支持使用 React 组件方式引入的 amis，使用 JSSDK 无法支持</p>\n</blockquote>\n<h2><a class=\"anchor\" name=\"%E4%B8%B4%E6%97%B6%E6%89%A9%E5%B1%95\" href=\"#%E4%B8%B4%E6%97%B6%E6%89%A9%E5%B1%95\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>临时扩展</h2><p>amis 的 JSON 配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：</p>\n<pre><code class=\"lang-jsx\"><span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"page\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"title\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"自定义组件示例\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"body\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"form\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"controls\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"text\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"label\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"用户名\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"usename\"</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"mycustom\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"children\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>\n value<span class=\"token punctuation\">,</span>\n onChange\n <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">这个是个自定义组件</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></spa
"toc": {
"label": "目录",
"type": "toc",
"children": [
{
"label": "临时扩展",
"fragment": "%E4%B8%B4%E6%97%B6%E6%89%A9%E5%B1%95",
"fullPath": "#%E4%B8%B4%E6%97%B6%E6%89%A9%E5%B1%95",
"level": 2
},
{
"label": "注册自定义类型",
"fragment": "%E6%B3%A8%E5%86%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B",
"fullPath": "#%E6%B3%A8%E5%86%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B",
"level": 2,
"children": [
{
"label": "工作原理",
"fragment": "%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86",
"fullPath": "#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86",
"level": 3
},
{
"label": "编写自定义组件",
"fragment": "%E7%BC%96%E5%86%99%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6",
"fullPath": "#%E7%BC%96%E5%86%99%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6",
"level": 3
},
{
"label": "表单项的扩展",
"fragment": "%E8%A1%A8%E5%8D%95%E9%A1%B9%E7%9A%84%E6%89%A9%E5%B1%95",
"fullPath": "#%E8%A1%A8%E5%8D%95%E9%A1%B9%E7%9A%84%E6%89%A9%E5%B1%95",
"level": 3
},
{
"label": "其它高级定制",
"fragment": "%E5%85%B6%E5%AE%83%E9%AB%98%E7%BA%A7%E5%AE%9A%E5%88%B6",
"fullPath": "#%E5%85%B6%E5%AE%83%E9%AB%98%E7%BA%A7%E5%AE%9A%E5%88%B6",
"level": 3,
"children": [
{
"label": "自定义验证器",
"fragment": "%E8%87%AA%E5%AE%9A%E4%B9%89%E9%AA%8C%E8%AF%81%E5%99%A8",
"fullPath": "#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%AA%8C%E8%AF%81%E5%99%A8",
"level": 4
},
{
"label": "OptionsControl",
"fragment": "optionscontrol",
"fullPath": "#optionscontrol",
"level": 4
},
{
"label": "组件间通信",
"fragment": "%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1",
"fullPath": "#%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1",
"level": 4
},
{
"label": "其他功能方法",
"fragment": "%E5%85%B6%E4%BB%96%E5%8A%9F%E8%83%BD%E6%96%B9%E6%B3%95",
"fullPath": "#%E5%85%B6%E4%BB%96%E5%8A%9F%E8%83%BD%E6%96%B9%E6%B3%95",
"level": 4
}
]
}
]
}
],
"level": 0
}
};
});