{"componentChunkName":"component---src-templates-components-tsx","path":"/components/send-code","webpackCompilationHash":"1daf920fd56dc476eb98","result":{"data":{"markdownRemark":{"description":{"descriptionHtml":"","apiHtml":"<h2 id=\"api\">API<a href=\"#api\" aria-hidden class=\"anchor\">#</a></h2>\n<h3 id=\"sendcode\">SendCode<a href=\"#sendcode\" aria-hidden class=\"anchor\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>start</td>\n<td>是否开始倒计时</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>second</td>\n<td>倒计时时长（秒）</td>\n<td>number</td>\n<td>60</td>\n</tr>\n<tr>\n<td>initText</td>\n<td>初始化按钮显示文本</td>\n<td>string</td>\n<td>'获取验证码'</td>\n</tr>\n<tr>\n<td>runText</td>\n<td>运行时显示文本</td>\n<td>string</td>\n<td>'{%s}秒后重新获取'</td>\n</tr>\n<tr>\n<td>resetText</td>\n<td>运行结束后显示文本</td>\n<td>string</td>\n<td>'重新获取验证码'</td>\n</tr>\n</tbody>\n</table>"},"tableOfContents":"<ul>\n<li>\n<p><a href=\"/components/send-code/#api\">API</a></p>\n<ul>\n<li><a href=\"/components/send-code/#sendcode\">SendCode</a></li>\n</ul>\n</li>\n</ul>","frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"type":"Basic Components"},"fields":{"path":"/components/send-code/index.en-US.md","slug":"/components/send-code","modifiedTime":1576230292798}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"发送验证码组件","type":"基础组件"},"fields":{"slug":"/components/send-code-cn","path":"/components/send-code/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"Send verification code component","type":"Basic Components"},"fields":{"slug":"/components/send-code","path":"/components/send-code/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"滚动条","type":"基础组件"},"fields":{"slug":"/components/scrollable-bar-cn","path":"/components/scrollable-bar/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"ScrollableBar","type":"Basic Components"},"fields":{"slug":"/components/scrollable-bar","path":"/components/scrollable-bar/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"全屏组件","type":"基础组件"},"fields":{"slug":"/components/full-screen-cn","path":"/components/full-screen/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"Full Screen","type":"Basic Components"},"fields":{"slug":"/components/full-screen","path":"/components/full-screen/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/fit-text-cn","path":"/components/fit-text/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"Adaptive Text","type":"Basic Components"},"fields":{"slug":"/components/fit-text","path":"/components/fit-text/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"基础组件"},"fields":{"slug":"/components/error-boundary-cn","path":"/components/error-boundary/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"Basic Components"},"fields":{"slug":"/components/error-boundary","path":"/components/error-boundary/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/button-list-cn","path":"/components/button-list/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"Button Group","type":"Basic Components"},"fields":{"slug":"/components/button-list","path":"/components/button-list/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"权限组件","type":"业务组件"},"fields":{"slug":"/components/authorized-cn","path":"/components/authorized/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"Authorized Component","type":"Business Components"},"fields":{"slug":"/components/authorized","path":"/components/authorized/index.en-US.md"}}}]},"demos":{"edges":[{"node":{"content":{"content":{"zh-CN":"\n<p>最简单的用法。</p>\n","en-US":"\n<p>Simplest of usage.</p>\n"},"highlightedCode":"<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">Example</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>start<span class=\"token punctuation\">,</span> setStart<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  \n  <span class=\"token keyword\">function</span> <span class=\"token function\">handleClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">c</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">setStart</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  \n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">SendCode</span></span>\n      <span class=\"token attr-name\">start</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>start<span class=\"token punctuation\">}</span></span>\n      <span class=\"token attr-name\">onClick</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>handleClick<span class=\"token punctuation\">}</span></span>\n      <span class=\"token attr-name\">onEnd</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">setStart</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n    <span class=\"token punctuation\">/></span></span>\n  <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">render</span><span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Example</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token punctuation\">)</span></code></pre></div>"},"code":"\"use strict\";\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nvar Example = function Example() {\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      start = _React$useState2[0],\n      setStart = _React$useState2[1];\n\n  function handleClick(c) {\n    setStart(true);\n  }\n\n  return React.createElement(SendCode, {\n    start: start,\n    onClick: handleClick,\n    onEnd: function onEnd() {\n      setStart(false);\n    }\n  });\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"基础样例","en_US":"Basic Simple"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/send-code/demo/simple","path":"/components/send-code/demo/simple.md"}}},{"node":{"content":{"content":{"zh-CN":"","en-US":""},"highlightedCode":"<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">Example</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>start<span class=\"token punctuation\">,</span> setStart<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  \n  <span class=\"token keyword\">function</span> <span class=\"token function\">handleClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">c</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">setStart</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  \n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">SendCode</span></span>\n      <span class=\"token attr-name\">start</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>start<span class=\"token punctuation\">}</span></span>\n      <span class=\"token attr-name\">second</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token number\">15</span><span class=\"token punctuation\">}</span></span>\n      <span class=\"token attr-name\">initText</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>点击<span class=\"token punctuation\">\"</span></span>\n      <span class=\"token attr-name\">runText</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>剩余{%s}秒<span class=\"token punctuation\">\"</span></span>\n      <span class=\"token attr-name\">onClick</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>handleClick<span class=\"token punctuation\">}</span></span>\n      <span class=\"token attr-name\">resetText</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>重新发送<span class=\"token punctuation\">\"</span></span>\n      <span class=\"token attr-name\">onEnd</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">setStart</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n    <span class=\"token punctuation\">/></span></span>\n  <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">render</span><span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Example</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token punctuation\">)</span></code></pre></div>"},"code":"\"use strict\";\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nvar Example = function Example() {\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      start = _React$useState2[0],\n      setStart = _React$useState2[1];\n\n  function handleClick(c) {\n    setStart(true);\n  }\n\n  return React.createElement(SendCode, {\n    start: start,\n    second: 15,\n    initText: \"\\u70B9\\u51FB\",\n    runText: \"\\u5269\\u4F59{%s}\\u79D2\",\n    onClick: handleClick,\n    resetText: \"\\u91CD\\u65B0\\u53D1\\u9001\",\n    onEnd: function onEnd() {\n      setStart(false);\n    }\n  });\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"自定义倒计时按钮","en_US":"Custom Button"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/send-code/demo/customize","path":"/components/send-code/demo/customize.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/components/send-code","demo":"/send-code/demo/"}}}