mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
7474ae0593
Co-authored-by: 无星 <32910694@qq.com>
327 lines
6.6 KiB
Markdown
327 lines
6.6 KiB
Markdown
## 数値入力
|
|
|
|
カスタマイズ可能な範囲で数値を入力します。
|
|
|
|
### 基本的な使い方
|
|
|
|
:::demo `<el-input-number>` 要素の `v-model` に変数をバインドすれば設定完了です。
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 1
|
|
};
|
|
},
|
|
methods: {
|
|
handleChange(value) {
|
|
console.log(value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(1);
|
|
const handleChange = (value) => {
|
|
console.log(value);
|
|
};
|
|
return {
|
|
num,
|
|
handleChange,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 無効化
|
|
|
|
:::demo `disabled` 属性には `boolean` を渡し、値が `true` の場合はコンポーネントを無効にする。値を範囲内で制御したい場合は、`min` 属性を追加して最小値を設定し、`max` 属性を追加して最大値を設定することができる。デフォルトでは、最小値は `0` である。
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" :disabled="true"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 1
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(1);
|
|
return {
|
|
num,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### ステップ
|
|
|
|
インクリメンタルステップを定義できます。
|
|
|
|
:::demo ステップを設定するために `step` 属性を追加する。
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" :step="2"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 5
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(5);
|
|
return {
|
|
num,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 厳密なステップ
|
|
|
|
:::demo `step-strictly` 属性は `boolean` を受け付ける。この属性が `true` の場合、入力値は step の倍数にしかならない。
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 2
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(2);
|
|
return {
|
|
num,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 精度
|
|
|
|
:::demo 入力値の精度を設定するために `precision` 属性を追加する。
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 1
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(1);
|
|
return {
|
|
num,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
|
|
:::
|
|
|
|
:::tip
|
|
精度 `precision` の値は非負整数でなければならず、`step` の小数点以下であってはならない。
|
|
:::
|
|
|
|
### サイズ
|
|
|
|
追加のサイズを設定するには、属性 `size` で `medium`, `small`, `mini` を使用します。
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num1"></el-input-number>
|
|
<el-input-number size="medium" v-model="num2"></el-input-number>
|
|
<el-input-number size="small" v-model="num3"></el-input-number>
|
|
<el-input-number size="mini" v-model="num4"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num1: 1,
|
|
num2: 1,
|
|
num3: 1,
|
|
num4: 1
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num1 = ref(1);
|
|
const num2 = ref(2);
|
|
const num3 = ref(3);
|
|
const num4 = ref(4);
|
|
return {
|
|
num1,
|
|
num2,
|
|
num3,
|
|
num4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 位置制御
|
|
|
|
:::demo コントロールボタンの位置を決めるには `controls-position` を設定します。
|
|
```html
|
|
<template>
|
|
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
num: 1
|
|
};
|
|
},
|
|
methods: {
|
|
handleChange(value) {
|
|
console.log(value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const num = ref(1);
|
|
const handleChange = (value) => {
|
|
console.log(value);
|
|
};
|
|
return {
|
|
num,
|
|
handleChange,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 属性
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|----| ----| ---| ----| -----|
|
|
|modelValue / v-model | バインディング値| number / undefined | — | 0 |
|
|
|min | 最小許容値 | number | — | `-Infinity` |
|
|
|max | 最大許容値 | number | — | `Infinity` |
|
|
|step | インクリメンタルステップ | number | — | 1 |
|
|
|step-strictly | 入力値がステップの倍数でなければならないかどうか | boolean | — | false |
|
|
|precision | 入力値精度 | number | — | — |
|
|
|size | コンポーネントのサイズ | string | large/medium/small/mini | large |
|
|
|disabled| コンポーネントが無効化されているかどうか | boolean | — | false |
|
|
|controls| コントロールボタンを有効にするかどうか | boolean | — | true |
|
|
|controls-position | 操作ボタンの位置 | string | right | - |
|
|
|name | ネイティブ入力の `name` と同じ | string | — | — |
|
|
|label | ラベルテキスト | string | — | — |
|
|
|placeholder | インプット内のプレースホルダー | string | - | - |
|
|
|
|
### イベント
|
|
|
|
| Event Name | Description | Parameters |
|
|
|----| ---- | -----|
|
|
|change | 値が変更されたときにトリガされる | currentValue, oldValue |
|
|
| blur | インプットがぼやけときにトリガされる | (event: Event) |
|
|
| focus | インプットがフォーカスされたときにトリガされる | (event: Event) |
|
|
|
|
### 方法
|
|
| Method | Description | Parameters |
|
|
|------|--------|-------|
|
|
| focus | インプットコンポーネントにフォーカス | - |
|
|
| select | インプット要素のテキストを選択 | — |
|
|
|