| 1 |
- import{e as s,o as t,G as a}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},e=[a('<h1>TextArea 文本域</h1><h3>介绍</h3><p>文本框内输入或编辑文字，支持限制输入数量。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { TextArea } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { TextArea } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(TextArea);\n\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n <span class="hljs-keyword">const</span> value = ref(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">return</span> { value };\n },\n};\n</code></pre><h3>显示字数统计</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">limit-show</span> <span class="hljs-attr">max-length</span>=<span class="hljs-string">"20"</span> /></span>\n</code></pre><h3>高度自定义，拉伸</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">autosize</span> /></span>\n</code></pre><h3>直读、禁用</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-textarea</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">model-value</span>=<span class="hljs-string">"textarea直读状态"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-textarea</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">model-value</span>=<span class="hljs-string">"textarea禁用状态"</span> <span class="hljs-attr">limit-show</span> <span class="hljs-attr">max-length</span>=<span class="hljs-string">"20"</span> /></span>\n</code></pre><h3>Prop</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>输入值，支持双向绑定</td><td>String</td><td>-</td></tr><tr><td>placeholder</td><td>设置占位提示文字</td><td>String</td><td><code>'请输入内容'</code></td></tr><tr><td>max-length</td><td>限制最长输入字符</td><td>String、Number</td><td>-</td></tr><tr><td>rows</td><td>textarea的高度</td><td>String、Number</td><td><code>2</code></td></tr><tr><td>limit-show</td><td>textarea是否展示输入字符。须配合<code>max-length</code>使用</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>autosize</td><td>高度是否可拉伸</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>text-align</td><td>文本位置,可选值<code>left</code>,<code>center</code>,<code>right</code></td><td>String</td><td><code>left</code></td></tr><tr><td>readonly</td><td>只读属性</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>disabled</td><td>禁用属性</td><td>Boolean</td><td><code>false</code></td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>输入框值改变时触发</td><td>value</td></tr><tr><td>focus</td><td>聚焦时触发</td><td>event</td></tr><tr><td>blur</td><td>失焦时触发</td><td>{value,event}</td></tr></tbody></table>',19)],l={setup:(a,{expose:l})=>(l({frontmatter:{}}),(a,l)=>(t(),s("div",n,e)))};export{l as default};
|
