|
@@ -163,7 +163,7 @@ app.use(InputNumber);
|
|
|
<nut-input-number :model-value="value" @change="onChange" />
|
|
<nut-input-number :model-value="value" @change="onChange" />
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
- import { reactive, getCurrentInstance, toRefs } from 'vue';
|
|
|
|
|
|
|
+ import { reactive, toRefs } from 'vue';
|
|
|
export default {
|
|
export default {
|
|
|
setup() {
|
|
setup() {
|
|
|
const state = reactive({
|
|
const state = reactive({
|
|
@@ -172,7 +172,7 @@ app.use(InputNumber);
|
|
|
const onChange = (value: number) => {
|
|
const onChange = (value: number) => {
|
|
|
console.log('异步演示 2 秒后更改');
|
|
console.log('异步演示 2 秒后更改');
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
- state.val8 = value;
|
|
|
|
|
|
|
+ state.value = value;
|
|
|
}, 2000);
|
|
}, 2000);
|
|
|
};
|
|
};
|
|
|
return { ...toRefs(state), onChange };
|
|
return { ...toRefs(state), onChange };
|
|
@@ -236,35 +236,35 @@ app.use(InputNumber);
|
|
|
|
|
|
|
|
### Props
|
|
### Props
|
|
|
|
|
|
|
|
-| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
-|----------------|----------------------------|----------------|------------|
|
|
|
|
|
-| v-model | 初始值 | string \| number | - |
|
|
|
|
|
-| input-width | 输入框宽度 | string | `40px` |
|
|
|
|
|
-| button-size | 操作符+、-尺寸 | string | `20px` |
|
|
|
|
|
-| min | 最小值限制 | string \| number | `1` |
|
|
|
|
|
-| max | 最大值限制 | string \| number | `9999` |
|
|
|
|
|
-| step | 步长 | string \| number | `1` |
|
|
|
|
|
-| decimal-places | 设置保留的小数位 | string \| number | `0` |
|
|
|
|
|
-| disabled | 禁用所有功能 | boolean | `false` |
|
|
|
|
|
-| readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
|
|
|
|
|
|
|
+| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
+|----------------|----------------------------|------------------|---------|
|
|
|
|
|
+| v-model | 初始值 | string \| number | - |
|
|
|
|
|
+| input-width | 输入框宽度 | string | `40px` |
|
|
|
|
|
+| button-size | 操作符+、-尺寸 | string | `20px` |
|
|
|
|
|
+| min | 最小值限制 | string \| number | `1` |
|
|
|
|
|
+| max | 最大值限制 | string \| number | `9999` |
|
|
|
|
|
+| step | 步长 | string \| number | `1` |
|
|
|
|
|
+| decimal-places | 设置保留的小数位 | string \| number | `0` |
|
|
|
|
|
+| disabled | 禁用所有功能 | boolean | `false` |
|
|
|
|
|
+| readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
|
|
|
|
|
|
|
|
### Slots
|
|
### Slots
|
|
|
|
|
|
|
|
-| 名称 | 说明 |
|
|
|
|
|
-|-|-|
|
|
|
|
|
-| leftIcon | 自定义左侧按钮 |
|
|
|
|
|
|
|
+| 名称 | 说明 |
|
|
|
|
|
+|-----------|----------------|
|
|
|
|
|
+| leftIcon | 自定义左侧按钮 |
|
|
|
| rightIcon | 自定义右侧按钮 |
|
|
| rightIcon | 自定义右侧按钮 |
|
|
|
|
|
|
|
|
### Events
|
|
### Events
|
|
|
|
|
|
|
|
-| 事件名 | 说明 | 回调参数 |
|
|
|
|
|
-|-----------|------------------------|--------------------------------|
|
|
|
|
|
-| add | 点击增加按钮时触发 | (event: Event) |
|
|
|
|
|
-| reduce | 点击减少按钮时触发 | (event: Event) |
|
|
|
|
|
-| overlimit | 点击不可用的按钮时触发 | (event: Event,type:string (reduce or add) ) |
|
|
|
|
|
-| change | 值改变时触发 | (value: number , event : Event) |
|
|
|
|
|
-| blur | 输入框失去焦点时触发 | (event: Event) |
|
|
|
|
|
-| focus | 输入框获得焦点时触发 | (event: Event ) |
|
|
|
|
|
|
|
+| 事件名 | 说明 | 回调参数 |
|
|
|
|
|
+|-----------|------------------------|---------------------------------------------|
|
|
|
|
|
+| add | 点击增加按钮时触发 | (event: Event) |
|
|
|
|
|
+| reduce | 点击减少按钮时触发 | (event: Event) |
|
|
|
|
|
+| overlimit | 点击不可用的按钮时触发 | (event: Event,type:string (reduce or add) ) |
|
|
|
|
|
+| change | 值改变时触发 | (value: number , event : Event) |
|
|
|
|
|
+| blur | 输入框失去焦点时触发 | (event: Event) |
|
|
|
|
|
+| focus | 输入框获得焦点时触发 | (event: Event ) |
|
|
|
|
|
|
|
|
## 主题定制
|
|
## 主题定制
|
|
|
|
|
|
|
@@ -272,21 +272,21 @@ app.use(InputNumber);
|
|
|
|
|
|
|
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
|
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
|
|
|
|
|
|
|
|
-| 名称 | 默认值 |
|
|
|
|
|
-| --------------------------------------- | -------------------------- |
|
|
|
|
|
-| --nut-inputnumber-icon-color| _var(--nut-title-color)_ |
|
|
|
|
|
-| --nut-inputnumber-icon-void-color| _var(--nut-disable-color)_ |
|
|
|
|
|
-| --nut-inputnumber-icon-size| _20px_ |
|
|
|
|
|
-| --nut-inputnumber-input-font-size| _12px_ |
|
|
|
|
|
-| --nut-inputnumber-input-font-color| _var(--nut-title-color)_ |
|
|
|
|
|
-| --nut-inputnumber-input-background-color| _var(--nut-help-color)_ |
|
|
|
|
|
-| --nut-inputnumber-input-border-radius| _4px_ |
|
|
|
|
|
-| --nut-inputnumber-input-width| _40px_ |
|
|
|
|
|
-| --nut-inputnumber-input-margin| _0 6px_ |
|
|
|
|
|
-| --nut-inputnumber-input-border| _0_ |
|
|
|
|
|
-| --nut-inputnumber-border| _0_ |
|
|
|
|
|
-| --nut-inputnumber-border-radius| _0_ |
|
|
|
|
|
-| --nut-inputnumber-height| _auto_ |
|
|
|
|
|
-| --nut-inputnumber-line-height| _normal_ |
|
|
|
|
|
-| --nut-inputnumber-border-box| _content-box_ |
|
|
|
|
|
-| --nut-inputnumber-display| _flex_ |
|
|
|
|
|
|
|
+| 名称 | 默认值 |
|
|
|
|
|
+|------------------------------------------|----------------------------|
|
|
|
|
|
+| --nut-inputnumber-icon-color | _var(--nut-title-color)_ |
|
|
|
|
|
+| --nut-inputnumber-icon-void-color | _var(--nut-disable-color)_ |
|
|
|
|
|
+| --nut-inputnumber-icon-size | _20px_ |
|
|
|
|
|
+| --nut-inputnumber-input-font-size | _12px_ |
|
|
|
|
|
+| --nut-inputnumber-input-font-color | _var(--nut-title-color)_ |
|
|
|
|
|
+| --nut-inputnumber-input-background-color | _var(--nut-help-color)_ |
|
|
|
|
|
+| --nut-inputnumber-input-border-radius | _4px_ |
|
|
|
|
|
+| --nut-inputnumber-input-width | _40px_ |
|
|
|
|
|
+| --nut-inputnumber-input-margin | _0 6px_ |
|
|
|
|
|
+| --nut-inputnumber-input-border | _0_ |
|
|
|
|
|
+| --nut-inputnumber-border | _0_ |
|
|
|
|
|
+| --nut-inputnumber-border-radius | _0_ |
|
|
|
|
|
+| --nut-inputnumber-height | _auto_ |
|
|
|
|
|
+| --nut-inputnumber-line-height | _normal_ |
|
|
|
|
|
+| --nut-inputnumber-border-box | _content-box_ |
|
|
|
|
|
+| --nut-inputnumber-display | _flex_ |
|