mirror of https://github.com/ElemeFE/element
input-number add the controls support (#1473)
parent
fa5aa2b183
commit
648c498fd9
|
@ -96,6 +96,7 @@ Allows you to define incremental steps.
|
||||||
|step | incremental step | number | — | 1 |
|
|step | incremental step | number | — | 1 |
|
||||||
|size | size of the component | string | large/small| — |
|
|size | size of the component | string | large/small| — |
|
||||||
|disabled| whether the component is disabled | boolean | — | false |
|
|disabled| whether the component is disabled | boolean | — | false |
|
||||||
|
|controls| whether to enable the control buttons | boolean | — | true |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
|
@ -101,6 +101,7 @@
|
||||||
| step | 计数器步长 | number | — | 1 |
|
| step | 计数器步长 | number | — | 1 |
|
||||||
| size | 计数器尺寸 | string | large, small | — |
|
| size | 计数器尺寸 | string | large, small | — |
|
||||||
| disabled | 是否禁用计数器 | boolean | — | false |
|
| disabled | 是否禁用计数器 | boolean | — | false |
|
||||||
|
| controls | 是否使用控制按钮 | boolean | — | true |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
|
|
@ -2,7 +2,8 @@
|
||||||
<div class="el-input-number"
|
<div class="el-input-number"
|
||||||
:class="[
|
:class="[
|
||||||
size ? 'el-input-number--' + size : '',
|
size ? 'el-input-number--' + size : '',
|
||||||
{ 'is-disabled': disabled }
|
{ 'is-disabled': disabled },
|
||||||
|
{ 'is-without-controls': !controls}
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<el-input
|
<el-input
|
||||||
|
@ -18,6 +19,7 @@
|
||||||
}">
|
}">
|
||||||
</el-input>
|
</el-input>
|
||||||
<span
|
<span
|
||||||
|
v-if="controls"
|
||||||
class="el-input-number__decrease el-icon-minus"
|
class="el-input-number__decrease el-icon-minus"
|
||||||
:class="{'is-disabled': minDisabled}"
|
:class="{'is-disabled': minDisabled}"
|
||||||
v-repeat-click="decrease"
|
v-repeat-click="decrease"
|
||||||
|
@ -26,6 +28,7 @@
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
|
v-if="controls"
|
||||||
class="el-input-number__increase el-icon-plus"
|
class="el-input-number__increase el-icon-plus"
|
||||||
:class="{'is-disabled': maxDisabled}"
|
:class="{'is-disabled': maxDisabled}"
|
||||||
v-repeat-click="increase"
|
v-repeat-click="increase"
|
||||||
|
@ -58,7 +61,11 @@
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
size: String
|
size: String,
|
||||||
|
controls: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
repeatClick: {
|
repeatClick: {
|
||||||
|
|
|
@ -82,5 +82,10 @@
|
||||||
padding-right: calc(var(--input-small-height) * 2 + 10);
|
padding-right: calc(var(--input-small-height) * 2 + 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@when without-controls {
|
||||||
|
& .el-input__inner {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -226,4 +226,20 @@ describe('InputNumber', () => {
|
||||||
done();
|
done();
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
it('controls', () => {
|
||||||
|
vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-input-number :controls="false" v-model="value" :max="8">
|
||||||
|
</el-input-number>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 8
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('.el-input-number__decrease')).to.not.exist;
|
||||||
|
expect(vm.$el.querySelector('.el-input-number__increase')).to.not.exist;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue