<template>
    <docs-layout title="文本框">
        <h2>概述</h2>
        <h3>文本框组件，支持实时显示输入字数，限制字数。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {TextArea} from 'vue-ydui/dist/lib.rem/textarea';<br />/* 使用px：import {TextArea} from 'vue-ydui/dist/lib.px/textarea'; */<br /><br />Vue.component(TextArea.name, TextArea);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck cell-demo">
            <docs-demo title="调用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group title="文本域"&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"&gt;&lt;/yd-textarea&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        <br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-cell-group title="文本域">
                        <yd-cell-item>
                            <yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"></yd-textarea>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>配合<span>yd-cell</span>组件效果更佳。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-textarea</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>maxlength</td>
                <td>最大输入字数</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>placeholder</td>
                <td>初始提示文字</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>readonly</td>
                <td>是否只读</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>showCounter</td>
                <td>是否显示计数器</td>
                <td>Boolean</td>
                <td>-</td>
                <td>true</td>
            </tr>
            <tr>
                <td>change</td>
                <td>更改后调用的方法</td>
                <td>Function</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        methods: {
            handleClick() {
                alert('Hello World!');
            }
        }
    }
</script>
