介绍图示代码演示APIfg-textarea样式、事件、方法都与组件相同,但支持click事件,详情可见fg-input输入项demo开发方案链接: 介绍与<input>相似,都是用于接收用户输入数据,区别是<textarea>支持多行文本输入,本次封装的fg-textarea组件,还会支持根据rows自动配置高度,以及根据rows自动撑开高度。 <a name="aA6WC"></a></p> <h2 id="bxllx2"><a name="bxllx2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图示</h2><p><img src="https://cdn.nlark.com/yuque/0/2021/png/8364464/1638430535126-d114e62e-5bd4-418f-9d6a-1176e287dfd6.png#clientId=u04f78c13-2b95-4&from=paste&id=u3e0e7be5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=356&originWidth=1110&originalType=url&ratio=1&size=33960&status=done&style=none&taskId=ub715b275-cda6-4318-9887-34f366fabcf" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/8364464/1638430535190-193e88ae-a8d6-47c8-8f4b-3750a2db01ce.png#clientId=u04f78c13-2b95-4&from=paste&id=uc2de2ae9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=344&originWidth=1082&originalType=url&ratio=1&size=133357&status=done&style=none&taskId=u3d1a876f-7115-4aac-955e-fd98a0e2173" alt="image.png"> <a name="oP0E8"></a></p> <h2 id="x7db7"><a name="x7db7" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="wjFSz"></a></p> <h2 id="640al0"><a name="640al0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>代码演示</h2><pre><code class="lang-javascript"><fg-textarea class="textarea" placeholder="固定高度" type="text" :value="textValue" :rows="rows" @input="inputAction" /> inputAction(e) { console.log(`文本内容:${e.value}`) }, </code></pre> <p><a name="fBPqb"></a></p> <h2 id="4n0f3n"><a name="4n0f3n" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="LNX9p"></a></p> <h2 id="8b0en3"><a name="8b0en3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>API</h2><table> <thead> <tr> <th><strong>参数</strong></th> <th><strong>说明</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> </tr> </thead> <tbody> <tr> <td>属性</td> <td>支持input组件所有属性</td> <td></td> <td></td> </tr> <tr> <td>rows</td> <td>用于指定输入的行数</td> <td>number</td> <td>2</td> </tr> <tr> <td>maxRows</td> <td>autoHeight=true时有效</td> <td>number</td> <td>2</td> </tr> <tr> <td>autoHeight</td> <td>启动时,默认一行高度,输入内容后,会自动撑开,撑开的最大高度将通过maxRows计算</td> <td>boolean</td> <td>false</td> </tr> <tr> <td>formatPattern</td> <td>格式化输入文本</td> <td>string</td> <td>‘’</td> </tr> </tbody> </table> <p><strong>注:</strong>使用该组件时,高度会自动通过配置的rows计算,不需要主动配置height。 <a name="hkHTq"></a></p> <h4 id="7600yq"><a name="7600yq" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /><br /></h4><p><a name="EpCEm"></a></p> <h3 id="2tuebq"><a name="2tuebq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>fg-textarea样式、事件、方法都与<fg-input>组件相同,但支持click事件,详情可见fg-input输入项</h3><p><a name="BqwQR"></a></p> <h2 id="3k6jpd"><a name="3k6jpd" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br />demo</h2><p><a name="GSGwi"></a></p> <h2 id="pj7pr"><a name="pj7pr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>开发方案链接:</h2><p><a rel="nofollow" href="https://docs.qq.com/doc/DVUhPSVVHYnlQdFhL">fg-textarea输入项-开发方案 </a></p> <p><a name="paIY3"></a></p> <h2 id="ej9rqs"><a name="ej9rqs" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h2>