-
Notifications
You must be signed in to change notification settings - Fork 1
/
1430-4f36c74e992b9cd361aa.js
1 lines (1 loc) · 62.4 KB
/
1430-4f36c74e992b9cd361aa.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[1430],{61430:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>P});var t=a(73450),p=a(73118),o=a(27378),e=a(57318),c=a(2038),l=a(33938),u=a(95388),i=a(82285),k=a(3454),r=a(24246);function d(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function m(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?d(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):d(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var g=function(){return(0,r.jsx)("div",{style:{width:400,color:"#666",fontSize:14},children:(0,r.jsx)(c.A,{lines:3,popWidth:400,showPop:!1,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"})})},y=function(){function n(){var n=o.useState(!1),s=(0,p.Z)(n,2),a=s[0],t=s[1],e=o.useCallback((n=>{t(n.target.checked)}),[]),k=o.useMemo((()=>new Array(10).fill(0).map(((n,s)=>({key:s+1,text:s+1})))),[]),d=o.useState(k[2]),m=(0,p.Z)(d,2),g=m[0],y=m[1],h=o.useCallback((n=>{y(n)}),[]),f=o.useState("Zent ( ˈzent ) 是🇺🇸🇯🇵🇬🇧🇩🇪🇫🇷🇮🇹🇮🇸🍎有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"),v=(0,p.Z)(f,2),b=v[0],j=v[1],x=o.useCallback((n=>{j(n.target.value)}),[]);return(0,r.jsxs)("div",{style:{display:"flex"},children:[(0,r.jsx)("div",{style:{color:"#666",fontSize:14,flexBasis:400},children:(0,r.jsx)(c.A,{accurate:a,lines:g.key,popWidth:400,text:b})}),(0,r.jsxs)("div",{style:{marginLeft:48},children:[(0,r.jsx)(l.X,{checked:a,onChange:e,children:"精确模式"}),(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",marginTop:16},children:[(0,r.jsx)(u.P,{options:k,onChange:h,value:g,inline:!0,width:100}),(0,r.jsx)("span",{children:"行"})]})]}),(0,r.jsx)("div",{style:{marginLeft:16,flexGrow:"1"},children:(0,r.jsx)(i.I,{type:"textarea",value:b,onChange:x})})]})}return(0,r.jsx)(n,{})},h=function(){return(0,r.jsx)("div",{style:{width:400,color:"#666",fontSize:14},children:(0,r.jsx)(c.A,{lines:1,popWidth:400,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"})})},f=function(){function n(){var n=o.useState("100%"),s=(0,p.Z)(n,2),a=s[0],t=s[1],e=o.useCallback((()=>{t("50%"===a?"100%":"50%")}),[a,t]);return(0,r.jsxs)("div",{style:{width:a,color:"#666",fontSize:14},children:[(0,r.jsx)(c.A,{lines:2,resizable:!0,popWidth:400,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}),(0,r.jsx)("div",{style:{marginTop:16},children:(0,r.jsx)(k.z,{onClick:e,children:"切换大小"})})]})}return(0,r.jsx)(n,{})},v=function(){return(0,r.jsx)("div",{style:{width:"50%",color:"#666",fontSize:14},children:(0,r.jsx)(c.A,{lines:2,popWidth:400,extra:(0,r.jsx)("a",{children:"更多"}),text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"})})},b=function(){class n extends o.Component{constructor(n){super(n),(0,t.Z)(this,"handleToggle",(()=>{this.setState({toggle:!this.state.toggle})})),this.state={toggle:!1}}render(){var n=this.state.toggle?"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。":"有赞，是一个商家服务公司。我们帮助每一位重视产品和服务的商家私有化顾客资产、拓展互联网客群、提高经营效率，全面助力商家成功。我们致力于成为商家服务领域里最被信任的引领者；并持续作一个Enjoy的组织。";return(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{style:{width:"50%",color:"#666",fontSize:14},children:(0,r.jsx)(c.A,{lines:2,popWidth:400,extra:(0,r.jsx)("a",{children:"更多"}),text:n})}),(0,r.jsx)(k.z,{onClick:this.handleToggle,style:{marginTop:16},children:"切换文案"})]})}}return(0,r.jsx)(n,{})},j=function(){return(0,r.jsx)("div",{style:{width:160,color:"#666",fontSize:14},children:(0,r.jsx)(c.A,{lines:3,popWidth:300,text:"FirstWord SecondWordIsVeryLoooooooong thirdWord fourthWord"})})},x=function(){class n extends o.Component{render(){return(0,r.jsx)("div",{style:{width:180,border:"1px solid #dcdee0 "},children:(0,r.jsx)(c.A,{text:"🇨🇳🇺🇸🇯🇵🇬🇧🇩🇪🇫🇷🇮🇹🇮🇸🍎😄💰✈️🚢🚀🐛🐼🐧",lines:1})})}}return(0,r.jsx)(n,{})};function w(n){return(0,r.jsx)(n.tag,m(m({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function C(n){return(0,r.jsx)(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function z(n){return(0,r.jsx)(w,{tag:"style",html:n.style})}function R(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),R(n.parentNode,s);return s}class W extends o.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,r.jsxs)("div",{className:"zandoc-react-demo",children:[(0,r.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,r.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,r.jsx)("div",{className:"zandoc-react-demo__title",children:(0,r.jsx)("p",{children:a||""})}),(0,r.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,r.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,r.jsx)(w,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class P extends o.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,R(s,-9))}}render(){return o.createElement("div",{className:"zandoc-react-container"},o.createElement(z,{style:""}),o.createElement(C,{html:'<h2 class="anchor-heading"><a href="#clamplines">¶</a><a href="javascript:void(0)" id="clamplines" class="anchor-point"></a>ClampLines</h2>\n<p>限制文本最大行数。不建议在一个页面上大量使用，会有性能问题。</p>\n<ul>\n<li>自适应容器大小需要 <code>ResizeObserver</code> 支持，部分老浏览器需要自行引入 polyfill。</li>\n<li>当 <code>ResizeObserver</code> 不存在时，该组件仅能处理由于窗口大小变化而导致的容器大小变化。</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>'}),o.createElement(W,{title:"不显示提示",id:"Demohidepop",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">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">style</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 literal-property property">width</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">showPop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。<span class="token punctuation">"</span></span>\n <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>'},o.createElement(g)),o.createElement(W,{title:"基础用法",id:"Demomultilines",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Checkbox</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Input</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Demo</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>accurate<span class="token punctuation">,</span> setAccurate<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</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 keyword">const</span> onAccurateChange <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useCallback</span><span class="token punctuation">(</span>\n <span class="token parameter">evt</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setAccurate</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">checked</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> linesOptions <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useMemo</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>\n <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>lines<span class="token punctuation">,</span> setLines<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</span><span class="token punctuation">(</span>linesOptions<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> onLinesChange <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useCallback</span><span class="token punctuation">(</span>\n <span class="token parameter">option</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setLines</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token punctuation">[</span>text<span class="token punctuation">,</span> setText<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</span><span class="token punctuation">(</span>\n <span class="token string">\'Zent ( ˈzent ) 是🇺🇸🇯🇵🇬🇧🇩🇪🇫🇷🇮🇹🇮🇸🍎有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。\'</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> onTextChange <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useCallback</span><span class="token punctuation">(</span>\n <span class="token parameter">evt</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setText</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</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">style</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 literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span> <span class="token punctuation">}</span><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>div</span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>\n <span class="token literal-property property">flexBasis</span><span class="token operator">:</span> <span class="token number">400</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ClampLines</span></span>\n <span class="token attr-name">accurate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>accurate<span class="token punctuation">}</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>lines<span class="token punctuation">.</span><span class="token property-access">key</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span>\n <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>div</span> <span class="token attr-name">style</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 literal-property property">marginLeft</span><span class="token operator">:</span> <span class="token number">48</span> <span class="token punctuation">}</span><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 class="token class-name">Checkbox</span></span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>accurate<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onAccurateChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n 精确模式\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Checkbox</span></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">style</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 literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span><span class="token punctuation">,</span> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">\'center\'</span><span class="token punctuation">,</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><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 class="token class-name">Select</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>linesOptions<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onLinesChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>lines<span class="token punctuation">}</span></span>\n <span class="token attr-name">inline</span>\n <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span>\n <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>div</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>div</span> <span class="token attr-name">style</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 literal-property property">marginLeft</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">flexGrow</span><span class="token operator">:</span> <span class="token string">\'1\'</span> <span class="token punctuation">}</span><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 class="token class-name">Input</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onTextChange<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>div</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><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(y)),o.createElement(W,{title:"单行显示",id:"Demosingleline",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">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">style</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 literal-property property">width</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。<span class="token punctuation">"</span></span>\n <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>'},o.createElement(h)),o.createElement(W,{title:"根据窗口或容器自动调整大小",id:"Demoresizable",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Demo</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>width<span class="token punctuation">,</span> setWidth<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</span><span class="token punctuation">(</span><span class="token string">\'100%\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> toggleWidth <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>width <span class="token operator">===</span> <span class="token string">\'50%\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token function">setWidth</span><span class="token punctuation">(</span><span class="token string">\'100%\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>\n <span class="token function">setWidth</span><span class="token punctuation">(</span><span class="token string">\'50%\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>width<span class="token punctuation">,</span> setWidth<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</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">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">resizable</span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。<span class="token punctuation">"</span></span>\n <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">style</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 literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><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 class="token class-name">Button</span></span> <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>toggleWidth<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><span class="token class-name">Button</span></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>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(f)),o.createElement(W,{title:"渲染额外节点",id:"Demoextra",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">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">style</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 literal-property property">width</span><span class="token operator">:</span> <span class="token string">"50%"</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">extra</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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 punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。<span class="token punctuation">"</span></span>\n <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>'},o.createElement(v)),o.createElement(W,{title:"主动更新文本内容",id:"Demoupdatetext",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> descriptionA <span class="token operator">=</span>\n <span class="token string">\'Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> descriptionB <span class="token operator">=</span>\n <span class="token string">\'有赞，是一个商家服务公司。我们帮助每一位重视产品和服务的商家私有化顾客资产、拓展互联网客群、提高经营效率，全面助力商家成功。我们致力于成为商家服务领域里最被信任的引领者；并持续作一个Enjoy的组织。\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Wrapper</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">toggle</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">handleToggle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">toggle</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">toggle</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">toggle</span> <span class="token operator">?</span> descriptionA <span class="token operator">:</span> descriptionB<span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</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 punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</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 literal-property property">width</span><span class="token operator">:</span> <span class="token string">\'50%\'</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">extra</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span>\n <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><span class="token class-name">Button</span></span> <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><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">handleToggle</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</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 literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n 切换文案\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></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><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Wrapper</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(b)),o.createElement(W,{title:"如果正常不能分割的一串非CJK文本在一行展示不全，允许单词内折行。",id:"Demononcjk",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">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">style</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 literal-property property">width</span><span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#666\'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><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 class="token class-name">ClampLines</span></span>\n <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FirstWord SecondWordIsVeryLoooooooong thirdWord fourthWord<span class="token punctuation">"</span></span>\n <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>'},o.createElement(j)),o.createElement(W,{title:"Emoji",id:"Demoemoji",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ClampLines</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">180</span><span class="token punctuation">,</span>\n <span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token string">\'1px solid #dcdee0 \'</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ClampLines</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>🇨🇳🇺🇸🇯🇵🇬🇧🇩🇪🇫🇷🇮🇹🇮🇸🍎😄💰✈️🚢🚀🐛🐼🐧<span class="token punctuation">"</span></span> <span class="token attr-name">lines</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><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>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(x)),o.createElement(C,{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>text</td>\n<td>初始文本</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>lines</td>\n<td>显示文本的最大行数</td>\n<td><code>number</code></td>\n<td><code>2</code></td>\n<td></td>\n</tr>\n<tr>\n<td>ellipsis</td>\n<td>省略符号的样式</td>\n<td>string</td>\n<td><code>\'...\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>showPop</td>\n<td>是否显示 Pop 提示</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td></td>\n</tr>\n<tr>\n<td>popWidth</td>\n<td>pop 的宽度</td>\n<td><code>number</code></td>\n<td><code>250</code></td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Pop 的触发方式</td>\n<td><code>string</code></td>\n<td><code>\'hover\'</code></td>\n<td><code>\'click\'</code>\n, \n<code>\'focus\'</code></td>\n</tr>\n<tr>\n<td>renderPop</td>\n<td>自定义 Pop content 的显示</td>\n<td><code>function</code></td>\n<td><code>identity</code></td>\n<td></td>\n</tr>\n<tr>\n<td>resizable</td>\n<td>是否响应容器的大小变化</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>算法选择：可选性能或者准确性</td>\n<td><code>\'performance\'</code>\n \n|\n \n<code>\'correctness\'</code></td>\n<td><code>\'performance\'</code></td>\n<td><code>\'correctness\'</code></td>\n</tr>\n<tr>\n<td>extra</td>\n<td>额外节点，用于显示\n<code>更多</code>\n一类的操作</td>\n<td><code>ReactElement</code></td>\n<td><code>null</code></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#guan-yu-suan-fa">¶</a><a href="javascript:void(0)" id="guan-yu-suan-fa" class="anchor-point"></a>关于算法</h4>\n<p>内置两种算法</p>\n<ul>\n<li><code>performance</code> 默认值；算法以性能优先，极端场景下可能出现截断位置错误，导致实际展示的行数和设置的不一致。但是，实际使用场景下很少会出现截断位置不准确的情况。导致截断错误的场景一般出现在大段中英文、以及 emoji 等字符混排的情况，同语种场景下基本不可能出现问题。</li>\n<li><code>correctness</code> 算法确保截断结果准确，但是性能相比 <code>performance</code> 模式会有数量级的差异。几百个字符的场景下，相比 <code>performance</code> 算法就会有肉眼可见的延迟。所以请慎用该算法。</li>\n</ul>'}))}}}}]);