2016-07-27 06:15:02 +00:00
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
num1: 1,
|
2016-08-25 10:24:51 +00:00
|
|
|
num2: 1,
|
|
|
|
num3: 5
|
2016-07-27 06:15:02 +00:00
|
|
|
}
|
2016-09-01 07:56:04 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleChange(value) {
|
|
|
|
console.log(value);
|
|
|
|
}
|
2016-07-27 06:15:02 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.demo-box.demo-input-number {
|
|
|
|
.el-input-number + .el-input-number {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2016-09-01 07:56:04 +00:00
|
|
|
## Input Number 数字输入框
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-09-01 07:56:04 +00:00
|
|
|
仅允许输入标准的数字值,可定义范围
|
2016-08-25 10:24:51 +00:00
|
|
|
|
2016-09-01 07:56:04 +00:00
|
|
|
### 基础用法
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-25 10:24:51 +00:00
|
|
|
:::demo 要使用它,只需要在`el-input-number`元素中使用`v-model`绑定变量即可,变量的初始值即为默认值。
|
2016-07-27 06:15:02 +00:00
|
|
|
```html
|
2016-08-25 10:24:51 +00:00
|
|
|
<template>
|
2016-09-01 07:56:04 +00:00
|
|
|
<el-input-number v-model="num1" @change="handleChange"></el-input-number>
|
2016-08-25 10:24:51 +00:00
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
num1: 1
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
2016-07-27 06:15:02 +00:00
|
|
|
```
|
2016-08-25 10:24:51 +00:00
|
|
|
:::
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-26 10:34:54 +00:00
|
|
|
### 禁用状态
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-25 10:24:51 +00:00
|
|
|
:::demo `disabled`属性接受一个`Boolean`,设置为`true`即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置`min`属性和`max`属性,不设置`min`和`max`时,最小值为 0。
|
2016-07-27 06:15:02 +00:00
|
|
|
|
|
|
|
```html
|
2016-08-11 07:51:13 +00:00
|
|
|
<el-input-number v-model="num1" :disabled="true"></el-input-number>
|
2016-07-27 06:15:02 +00:00
|
|
|
```
|
2016-08-25 10:24:51 +00:00
|
|
|
:::
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-09-01 07:56:04 +00:00
|
|
|
### 步数
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-09-01 07:56:04 +00:00
|
|
|
允许定义递增递减的步数控制
|
2016-08-25 10:24:51 +00:00
|
|
|
|
|
|
|
:::demo 设置`step`属性可以控制步长,接受一个`Number`。
|
2016-07-27 06:15:02 +00:00
|
|
|
|
|
|
|
```html
|
2016-08-11 07:51:13 +00:00
|
|
|
<el-input-number v-model="num2" :step="2"></el-input-number>
|
2016-07-27 06:15:02 +00:00
|
|
|
```
|
2016-08-25 10:24:51 +00:00
|
|
|
:::
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-26 10:34:54 +00:00
|
|
|
### Attributes
|
2016-07-27 06:15:02 +00:00
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|----------|-------------- |----------|-------------------------------- |-------- |
|
2016-09-01 07:56:04 +00:00
|
|
|
| value | 绑定值 | number | — | — |
|
|
|
|
| min | 设置计数器允许的最小值 | number | — | 0 |
|
|
|
|
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
|
|
|
| step | 计数器步长 | number | — | 1 |
|
|
|
|
| size | 计数器尺寸 | string | large, small | — |
|
|
|
|
| disabled | 是否禁用计数器 | boolean | — | false |
|
|
|
|
|
|
|
|
### Events
|
|
|
|
| 事件名称 | 说明 | 回调参数 |
|
|
|
|
|---------|--------|---------|
|
|
|
|
| change | 绑定值被改变时触发 | 最后变更的值 |
|