| 1 |
- import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},u=d('<h1>Input 输入框组件</h1><h3>介绍</h3><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { input } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(input);\n\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p>双向绑定</p><pre><code class="language-html"><nut-input v-model:value="state.val1" @change="change" label="标题：" />\n\n</code></pre><h3>禁用和只读</h3><pre><code class="language-html"><nut-input v-model:value="state.val2" @change="change" disabled="true" label="标题："/>\n<nut-input v-model:value="state.val3" @change="change" readonly="true" label="标题："/>\n</code></pre><h3>限制输入长度</h3><pre><code class="language-html"> <nut-input v-model:value="state.val4" @change="change" maxLength="7" label="限制7：" />\n</code></pre><h3>其他类型</h3><pre><code class="language-html"><nut-input v-model:value="state.val0" @change="change" type="password" label="密码："/>\n<nut-input v-model:value="state.val5" @change="change" type="digit" label="整数：" />\n<nut-input v-model:value="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字："/>\n</code></pre><h3>文本域</h3><pre><code class="language-html"> <nut-input v-model:value="state.val7" @change="change" autosize="true" type="textarea" placeholder="文本域" label="留言："/>\n<nut-input v-model:value="state.val7" @change="change" rows="5" type="textarea" placeholder="设置输入五行" label="留言："/>\n\n</code></pre><h3>文本域字数统计</h3><pre><code class="language-html"> <nut-input v-model:value="state.val8" @change="change" rows="5" limitShow="true" maxLength="20" type="textarea" placeholder="设置输入五行" label="留言："/>\n\n</code></pre><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>类型，可选值为 <code>text</code> <code>textarea</code> <code>number</code> 等</td><td>String</td><td><code>text</code></td></tr><tr><td>value</td><td>输入值，双向绑定</td><td>String</td><td>-</td></tr><tr><td>placeholder</td><td>为空时占位符</td><td>String</td><td>-</td></tr><tr><td>placeholder-style</td><td>placeholder 样式</td><td>String</td><td>-</td></tr><tr><td>label</td><td>左侧文案</td><td>string</td><td>-</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean</td><td><code>false</code></td></tr><tr><td>readonly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>clear-btn</td><td>是否带清除按钮（icon）</td><td>boolean</td><td><code>true</code></td></tr><tr><td>required</td><td>是否带必填的*号，且blur事件做非空校验</td><td>boolean</td><td><code>false</code></td></tr><tr><td>maxlength</td><td>限制最长输入字符</td><td>string/number</td><td>-</td></tr><tr><td>rows</td><td>textarea时高度</td><td>string/number</td><td>2</td></tr><tr><td>limit-show</td><td>textarea时是否展示输入字符。须设置maxlength</td><td>boolean</td><td><code>false</code></td></tr><tr><td>change</td><td>输入内容时触发</td><td>function</td><td>-</td></tr><tr><td>focus</td><td>聚焦时触发</td><td>function</td><td>-</td></tr><tr><td>blur</td><td>失焦时触发</td><td>function</td><td>-</td></tr><tr><td>clear</td><td>点击清空时触发</td><td>function</td><td>-</td></tr></tbody></table>',19),a={expose:[],setup:d=>(d,a)=>(e(),t("div",o,[u]))};export default a;
|
