<textarea>

显示效果

1.图片or视频
2.效果代码下载

简介

组件用来创建接收用户输入字符的多行输入组件。 <textarea> 组件的工作方式目前只支持 普通文本，暂不支持比如 url，email，tel 等。<br /><strong>基本用法</strong></p> <pre><code class="lang-html"><template> <textarea ref="textarea" class="textarea" @input="input" @confirm="confirm" :value="value" /> </template> <script> export default { data() { return { value: 'textarea' }; }, mounted() { this.$refs.textarea.getCursorPosition(r => { console.log('cursorPosition=' + r); }); }, methods: { input(v) { console.log('input', v); }, confirm(v) { console.log('confirm', v); } }, }; </code></pre> <p><a name="uB9m7"></a></p> <h2 id="d24xvu"><a name="d24xvu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>子组件</h2><p><textarea> 不支持子组件。 <a name="s4XyM"></a></p> <h2 id="8rqtdb"><a name="8rqtdb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>属性</h2><table> <thead> <tr> <th>key</th> <th>类型</th> <th>描述</th> <th>默认值</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>value</td> <td>string</td> <td>组件的默认内容</td> <td></td> <td></td> </tr> <tr> <td>autofocus</td> <td>boolean</td> <td>布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点</td> <td></td> <td></td> </tr> <tr> <td>cursorColor</td> <td>Color</td> <td>设置光标的颜色</td> <td>rgba(255,255,255,0.5)</td> </tr> </tbody> </table> <p> | | cursorSize | number | 设置光标的宽度 | 2 | </p> <p> | | softInputEnable | boolean | 是否支持弹出系统软键盘 | false | </p> <p> | | showCursor | boolean | 是否持续显示光标 | false | </p> <p> |</p> <p><a name="zfGUP"></a></p> <h2 id="1fmysx"><a name="1fmysx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>样式</h2><p><a name="PNlLP"></a></p> <h4 id="m5v5a"><a name="m5v5a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>color {color}</h4><p>字符颜色。默认值是 #000 <a name="oEO3c"></a></p> <h4 id="a43nhi"><a name="a43nhi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>font-size {px}</h4><p>字符颜色。默认值是 32px <a name="XMrhy"></a></p> <h4 id="fb3820"><a name="fb3820" class="reference-link"></a><span class="header-link octicon octicon-link"></span>通用样式</h4><p>支持所有通用样式</p> <ul> <li>盒模型</li><li>flexbox 布局</li><li>position</li><li>opacity</li><li>background-color</li></ul> <p>查看 <strong>组件通用样式</strong> <a name="rvOea"></a></p> <h2 id="dgflzo"><a name="dgflzo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>事件</h2><ul> <li><strong>通用事件</strong> 支持所有<strong>通用事件</strong>。</li><li><strong>input</strong>. 当输入状态时，会不断触发。<ul> <li>@param value: 当前文本。</li></ul> </li><li><strong>confirm</strong>. 当输入完成时触发。<ul> <li>@param value: 当前文本。</li></ul> </li><li><strong>focus</strong>. 当输入框获得焦点时。</li><li><strong>blur</strong>. 当输入框丢失焦点时。</li></ul> <p>约束<br />目前不支持 this.$el(id).value = ‘’ 这种方式改写 input value。只支持在 <textarea> 组件的 input、change 事件中改写。 <a name="C3dNQ"></a></p> <h2 id="2pinab"><a name="2pinab" class="reference-link"></a><span class="header-link octicon octicon-link"></span>扩展</h2><p><a name="YM2Cq"></a></p> <h3 id="9ojn7w"><a name="9ojn7w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>appendText(text)</h3><p>从当前光标位置追加文本。 <a name="zZQkC"></a></p> <h3 id="1qdjbh"><a name="1qdjbh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>popBack()</h3><p>从当前光标位置往前删除一个字符。 <a name="rL1fL"></a></p> <h3 id="bpazb9"><a name="bpazb9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>commitText(text)</h3><p>替换全部文本。 <a name="mvd8K"></a></p> <h3 id="6hg6b1"><a name="6hg6b1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>commitComplete()</h3><p>触发confirm事件。 <a name="apNFv"></a></p> <h3 id="csot41"><a name="csot41" class="reference-link"></a><span class="header-link octicon octicon-link"></span>getValue(callback)</h3><p>获取当前文本内容。 <a name="zaz4E"></a></p> <h3 id="8fw2au"><a name="8fw2au" class="reference-link"></a><span class="header-link octicon octicon-link"></span>getCurrentLineValue(callback)</h3><p>获取当前光标位置所在行的文本内容。 <a name="LMYir"></a></p> <h3 id="7z5mbd"><a name="7z5mbd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>getCurrentLine(callback)</h3><p>获取当前光标位置所在行的文本内容，文本index以及光标在当前行中的位置。 <a name="lrVV2"></a></p> <h3 id="32lq99"><a name="32lq99" class="reference-link"></a><span class="header-link octicon octicon-link"></span>setCurrentLineValue(text)</h3><p>设置当前光标所在行的文本内容，会触发文本重新布局。 <a name="GEToV"></a></p> <h3 id="euogt2"><a name="euogt2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>replaceValue(pos, len, text)</h3><p>替换部分文本内容。 <a name="B6lnW"></a></p> <h3 id="feks87"><a name="feks87" class="reference-link"></a><span class="header-link octicon octicon-link"></span>getCursorPosition(callback)</h3><p>获取当前光标位置。 <a name="QjTez"></a></p> <h3 id="bjfqiu"><a name="bjfqiu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>setCursorPosition(index)</h3><p>设置当前光标位置。 <a name="cMQnH"></a></p> <h3 id="9vkadw"><a name="9vkadw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>moveCursor(direction)</h3><p>移动指针位置，prev/next/up/down。</p>