element-plus/website/docs/jp/input-number.md

数値入力

カスタマイズ可能な範囲で数値を入力します。

基本的な使い方

:::demo <el-input-number> 要素の v-model に変数をバインドすれば設定完了です。

<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 である。

<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 属性を追加する。

<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 の倍数にしかならない。

<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 属性を追加する。

<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

<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 を設定します。

<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	インプット要素のテキストを選択	—