# 【输入正整数】应用示例

# 举个例子:录入【步行距离】场景

针对这样的应用场景封装了v-integer指令,只需要在<el-input/> 或者<input/> 或者 包含input标签的组件上加上 v-integer 指令即可。

最小0米,最大9999米

v-integer 指令示例

<template>
  <el-form label-width="140px" style="padding: 16px;max-width: 400px;">
    <el-form-item label="步行距离:">
      <el-input v-model="distance"
                v-integer="{min:0,max:9999}"
                placeholder="请输入正整数"
                @input="onInputPrice"
                @change="onChangePrice">
        <template slot="append">米</template>
      </el-input>
      最小0米,最大9999米
    </el-form-item>
  </el-form>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				distance: '123',
			}
		},
		methods: {
			onInputPrice(value) {
				console.log('input:', {value})
			},
			onChangePrice(value) {
				console.log('change:', {value})
			},
		}
	}
</script>
显示代码