doc.4596d715.js 3.3 KB

1
  1. import{c as t,o as d,A as e}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},r=e('<h1>InputNumber 数字输入框组件</h1><h3>介绍</h3><p>基于</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { inputnumber } from &#39;@nutui/nutui&#39;;\n\nconst app = createApp();\napp.use(inputnumber);\n\n</code></pre><h2>代码演示</h2><h3>基础用法1</h3><p>初始化一个默认值</p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; /&gt;\n</code></pre><h3>基础用法2</h3><p>设置步长<code>step</code> 和 保留的小数位<code>decimalPlaces</code></p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; :step=&quot;1.1&quot; :decimalPlaces=&quot;1&quot; /&gt;\n</code></pre><h3>基础用法3</h3><p><code>min</code> 和 <code>max</code> 属性分别表示最小值和最大值</p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; :min=&quot;3&quot; :max=&quot;5&quot; /&gt;\n</code></pre><h3>基础用法4</h3><p><code>readonly</code>设置只读</p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; :readonly=&quot;true&quot; /&gt;\n</code></pre><h3>基础用法5</h3><p><code>size</code>设置操作符的大小</p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; :size=&quot;20px&quot; /&gt;\n</code></pre><h3>高级用法</h3><p><code>async</code>支持异步修改数量,设置了此属性为true,必须同时在<code>change</code>事件中手动设置input值才能生效</p><pre><code class="language-html">&lt;nut-inputnumber v-model:modelValue=&quot;1&quot; :async=&quot;true&quot; @change=&quot;change&quot;/&gt;\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>size</td><td>操作符+、-尺寸</td><td>String</td><td>20px</td></tr><tr><td>color</td><td>操作符+、-颜色</td><td>String</td><td>#1a1a1a</td></tr><tr><td>dis-color</td><td>操作符+、-禁用时颜色</td><td>String</td><td>#ccc</td></tr><tr><td>min</td><td>最小值</td><td>String、Number</td><td>1</td></tr><tr><td>max</td><td>最大值</td><td>String、Number</td><td>Infinity</td></tr><tr><td>step</td><td>步长</td><td>String、Number</td><td>1</td></tr><tr><td>readonly</td><td>只读</td><td>Boolean</td><td>false</td></tr><tr><td>modelValue</td><td>初始值</td><td>String、Number</td><td>‘’</td></tr><tr><td>decimal-places</td><td>设置保留的小数位</td><td>String、Number</td><td>1</td></tr><tr><td>async</td><td>支持异步</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>值改变时触发</td><td>num: string</td></tr><tr><td>focus</td><td>输入框获取焦点时触发</td><td>event: Event, num: string</td></tr><tr><td>blur</td><td>输入框失去焦点时触发</td><td>event: Event, num: string</td></tr><tr><td>add-no-allow</td><td>超出最大事件回调</td><td>-</td></tr><tr><td>reduce-no-allow</td><td>超出最小事件回调</td><td>-</td></tr></tbody></table>',29),u={expose:[],setup:e=>(e,u)=>(d(),t("div",o,[r]))};export default u;