-
Notifications
You must be signed in to change notification settings - Fork 0
/
115-a28f22da2d828c0b81f9.js
1 lines (1 loc) · 22.3 KB
/
115-a28f22da2d828c0b81f9.js
1
webpackJsonp([115],{1562:function(n,a,s){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function e(n){return y.default.createElement(n.tag,(0,h.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function p(n){return y.default.createElement(e,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function o(n){return y.default.createElement(e,{tag:"style",html:n.style})}function c(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),c(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var l=s(1),u=t(l),r=s(4),i=t(r),k=s(2),d=t(k),m=s(3),g=t(m),f=s(7),h=t(f),E=s(0),y=t(E),v=s(232),z=t(v),A=s(359),b=function(){return y.default.createElement(A.Alert,null,"公告内容")},w=function(){return y.default.createElement(A.Alert,null,y.default.createElement(A.Icon,{type:"error-circle"}),y.default.createElement("span",null,"警告：交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。"),y.default.createElement("a",{href:"",onClick:function(n){return n.preventDefault()}},"立即订购"))},N=function(){return y.default.createElement("div",{className:"zent-alert-example"},y.default.createElement(A.Alert,{type:"info"},"这个是默认的 info 样式。"),y.default.createElement(A.Alert,{type:"warning"},"这个是 warning 样式。"),y.default.createElement(A.Alert,{type:"danger"},"这个是 danger 样式。"))},_=function(){return y.default.createElement("div",{className:"zent-alert-example"},y.default.createElement(A.Alert,null,"这个是正常尺寸的公告。"),y.default.createElement(A.Alert,{size:"large"},y.default.createElement("p",{className:"text"},"这个是大尺寸"),y.default.createElement("p",null,"交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。"),y.default.createElement("br",null),y.default.createElement("p",null,"官方咨询电话：0571-88888888")))},x=function(){return y.default.createElement(A.Alert,{type:"warning",rounded:!0},"这个公告是有圆角的。")},D=function(){return y.default.createElement(A.Alert,{size:"large",closable:!0},y.default.createElement("div",{className:"content"},y.default.createElement("p",{className:"text"},"交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。"),y.default.createElement("p",null,"官方咨询电话：0571-88888888")),y.default.createElement("br",null),y.default.createElement(A.Button,null,"了解详情"))},C=function(){return y.default.createElement(A.Alert,{type:"info",closable:!0,onClose:function(){return A.Sweetalert.alert({content:"公告关闭了"})}},"这个公告关闭时有回调函数。")},O=function(n){function a(){var n,s,t,e;(0,u.default)(this,a);for(var p=arguments.length,o=Array(p),c=0;c<p;c++)o[c]=arguments[c];return s=t=(0,d.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(o))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},e=s,(0,d.default)(t,e)}return(0,g.default)(a,n),(0,i.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return y.default.createElement("div",{className:"zandoc-react-demo"},y.default.createElement("div",{className:"zandoc-react-demo__preview"},p),y.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},y.default.createElement("div",{className:"zandoc-react-demo__title"},y.default.createElement("p",null,s||"")),y.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&y.default.createElement("pre",{className:"zandoc-react-demo__code"},y.default.createElement(e,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(E.Component),M=function(n){function a(){return(0,u.default)(this,a),(0,d.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,g.default)(a,n),(0,i.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,z.default)(document.documentElement,0,c(a,-9))}}},{key:"render",value:function(){return y.default.createElement("div",{className:"zandoc-react-container",key:null},y.default.createElement(o,{style:".zenticon-error-circle {\n\tcolor: #FF4343;\n\tmargin-right: 5px;\n}\n\n.zent-alert-example {\n padding-right: 32px;\n}\n\n.zent-alert-example .zent-alert {\n margin-bottom: 20px\n }\n\n.zent-alert-example .zent-alert:last-child {\n\tmargin-bottom: 0;\n}\n\n.zent-alert-example .zent-alert a {\n color: #3388FF;\n margin-left: 10px;\n}\n\n.zent-alert .text {\n\t\tmargin-bottom: 5px;\n\t}"}),y.default.createElement(p,{html:'<h2 class="anchor-heading"><a href="#alert-gong-gao">¶</a><a href="javascript:void(0)" id="alert-gong-gao" class="anchor-point"></a>Alert 公告</h2>\n<p>公告，提供一个醒目的提示信息。</p>\n<h3 class="anchor-heading"><a href="#shi-yong-zhi-nan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan" class="anchor-point"></a>使用指南</h3>\n<ul>\n<li>内容文字尽可能精简, 减少阅读障碍。</li>\n<li>公告类按钮不要多于两个, 保持逻辑简单。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),y.default.createElement(O,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span><span class="token punctuation">></span></span>公告内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.default.createElement(b)),y.default.createElement(O,{title:"公告内容可以是非字符串",id:"Democontent",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>警告：交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>e <span class="token operator">=></span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>立即订购<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.default.createElement(w)),y.default.createElement(O,{title:"三种样式：info, warning 和 danger",id:"Demostyles",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-alert-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这个是默认的 info 样式。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这个是 warning 样式。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这个是 danger 样式。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.default.createElement(N)),y.default.createElement(O,{title:"公告有两种大小",id:"Demosizes",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-alert-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span><span class="token punctuation">></span></span>这个是正常尺寸的公告。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这个是大尺寸<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>官方咨询电话：<span class="token number">0571</span><span class="token operator">-</span><span class="token number">88888888</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.default.createElement(_)),y.default.createElement(O,{title:"支持圆角样式",id:"Demoround",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">rounded</span><span class="token punctuation">></span></span>这个公告是有圆角的。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.default.createElement(x)),y.default.createElement(O,{title:"关闭按钮",id:"Democlose",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Alert</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>官方咨询电话：<span class="token number">0571</span><span class="token operator">-</span><span class="token number">88888888</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>了解详情<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.default.createElement(D)),y.default.createElement(O,{title:"关闭时的回调",id:"Democallback",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Alert<span class="token punctuation">,</span> Sweetalert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token operator"><</span>Alert\n type<span class="token operator">=</span><span class="token string">"info"</span>\n closable\n onClose<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> Sweetalert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">{</span> content<span class="token punctuation">:</span> <span class="token string">\'公告关闭了\'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n <span class="token operator">></span>\n 这个公告关闭时有回调函数。\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Alert</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.default.createElement(C)),y.default.createElement(p,{html:"<h3 class=\"anchor-heading\"><a href=\"#api\">¶</a><a href=\"javascript:void(0)\" id=\"api\" class=\"anchor-point\"></a>API</h3>\n<table class=\"table\">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>警告提示的样式</td>\n<td>string</td>\n<td><code>'info'</code></td>\n<td><code>'info'</code>\n, \n<code>'warning'</code>\n, \n<code>'danger'</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>alert 的大小</td>\n<td>string</td>\n<td><code>'normal'</code></td>\n<td><code>'normal'</code>\n, \n<code>'large'</code></td>\n</tr>\n<tr>\n<td>rounded</td>\n<td>是否圆角</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td><code>true</code>\n, \n<code>false</code></td>\n</tr>\n<tr>\n<td>closable</td>\n<td>是否可以关闭</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td><code>true</code>\n, \n<code>false</code></td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>关闭时的回调</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td>string</td>\n<td><code>''</code></td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>自定义前缀</td>\n<td>string</td>\n<td><code>'zent'</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>"}))}}]),a}(E.Component);a.default=M}});