Number数字输入框
... 2021-8-5 About 2 min
# Number数字输入框
# 基础用法
通过将type属性的值指定为number
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Expand Copy Copy
# 默认值
value属性可以提供一个初始化的默认值
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number',
value:2
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 禁用状态
disabled属性接受一个Boolean，设置为true即可禁用整个组件
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number',
disabled:true
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 最大值最小值
如果你只需要控制数值在某一范围内，可以设置min属性和max属性，不设置min和max时，最小值为 0。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
min:1,
max:2,
type:'number'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 步数
设置step属性可以控制步长，接受一个Number。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number',
step:2,
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 严格步数
stepStrictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number',
step:2,
stepStrictly:true,
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 隐藏控制器
设置controls属性是否使用控制按钮。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [{
label:'数字输入框',
prop:'num',
type:'number',
controls:false,
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 尺寸
可通过size属性指定输入框的尺寸，默认为small，还提供了large,small和mini三种尺寸。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'input',
type:'number',
size:'large',
},
{
label:'数字输入框',
prop:'input1',
type:'number'
},
{
label:'数字输入框',
prop:'input2',
type:'number',
size:'mini'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Expand Copy Copy
# 精度
设置precision属性可以控制数值精度，接收一个Number。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
type:'number',
precision:2,
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 按钮位置
设置 controlsPosition属性可以控制按钮位置。
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数字输入框',
prop:'num',
controlsPosition:'',
type:'number'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy