121-a28f22da2d828c0b81f9.js

webpackJsonp([121],{1523:function(n,a,e){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function s(n){return v.default.createElement(n.tag,(0,g.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function o(n){return v.default.createElement(s,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function c(n){return v.default.createElement(s,{tag:"style",html:n.style})}function p(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),p(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var l=e(1),r=t(l),i=e(4),u=t(i),d=e(2),m=t(d),f=e(3),h=t(f),k=e(7),g=t(k),z=e(0),v=t(z),_=e(232),y=t(_),b=(function(n){function a(){var n,e,t,s;(0,r.default)(this,a);for(var o=arguments.length,c=Array(o),p=0;p<o;p++)c[p]=arguments[p];return e=t=(0,m.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},s=e,(0,m.default)(t,s)}(0,h.default)(a,n),(0,u.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,e=a.title,t=a.src,o=a.children;return v.default.createElement("div",{className:"zandoc-react-demo"},v.default.createElement("div",{className:"zandoc-react-demo__preview"},o),v.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},v.default.createElement("div",{className:"zandoc-react-demo__title"},v.default.createElement("p",null,e||"")),v.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&v.default.createElement("pre",{className:"zandoc-react-demo__code"},v.default.createElement(s,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}])}(z.Component),function(n){function a(){return(0,r.default)(this,a),(0,m.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,h.default)(a,n),(0,u.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,y.default)(document.documentElement,0,p(a,-9))}}},{key:"render",value:function(){return v.default.createElement("div",{className:"zandoc-react-container",key:null},v.default.createElement(c,{style:""}),v.default.createElement(o,{html:'<h2 class="anchor-heading"><a href="#zent-2-x-dao-3-x-sheng-ji-zhi-nan">¶</a><a href="javascript:void(0)" id="zent-2-x-dao-3-x-sheng-ji-zhi-nan" class="anchor-point"></a>Zent 2.x 到 3.x 升级指南</h2>\n<h3 class="anchor-heading"><a href="#javascript-zu-jian">¶</a><a href="javascript:void(0)" id="javascript-zu-jian" class="anchor-point"></a>Javascript 组件</h3>\n<p>从 Zent 3.x 开始我们不再单独为每个组件发包，所有组件代码都包含在一个包里。因此，原来的一些使用方法我们不再支持了。</p>\n<pre><code class="language-js"><span class="token comment">// 这些 2.x 的写法不再支持(以 Button 组件为例)</span>\n<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">\'zent-button\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">\'zent/button\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 请改成 3.x 的写法</span>\n<span class="token keyword">import</span> <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></code></pre>\n<p>也就是说 3.x 只支持 <code>import { Button } from \'zent\';</code> 这一种写法。</p>\n<h3 class="anchor-heading"><a href="#umd">¶</a><a href="javascript:void(0)" id="umd" class="anchor-point"></a>UMD</h3>\n<p>UMD 文件的路径变了。</p>\n<pre><code class="language-js"><span class="token comment">// 2.x 的写法</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/dist/main.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 请改成 3.x 的写法</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/lib/zent-umd.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token comment">// 或者使用 minify 后的版本</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/lib/zent-umd.min.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h3 class="anchor-heading"><a href="#yang-shi">¶</a><a href="javascript:void(0)" id="yang-shi" class="anchor-point"></a>样式</h3>\n<p>css 文件的目录变了。</p>\n<pre><code class="language-js"><span class="token comment">// 2.x 的写法</span>\n<span class="token keyword">import</span> <span class="token string">\'zent/lib/index.css\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 请改成 3.x 的写法</span>\n<span class="token keyword">import</span> <span class="token string">\'zent/css/index.css\'</span><span class="token punctuation">;</span></code></pre>\n<h3 class="anchor-heading"><a href="#babel-plugin-zent">¶</a><a href="javascript:void(0)" id="babel-plugin-zent" class="anchor-point"></a>babel-plugin-zent</h3>\n<p>我们不再维护每个组件单独的包，但是我们提供了一个更加方便的替代方案来达到相同的目的。</p>\n<p>这个 babel 插件可以自动重写所有 Zent 的 <code>import</code>，自动在打包的时候剔除没有使用的 Zent 组件代码，帮助减小代码体积。</p>\n<p>使用说明请看<a href="../guides/babel-plugin-zent">插件文档</a>。</p>'}))}}]),a}(z.Component));a.default=b}});