dk-plusinput-number Number input box
Basic usage
html
<dk-input-number></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
Disabled state
disabled Property set to true, The digital input box is disabled.
html
<dk-input-number v-model='value' disabled></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
size
size The attribute is used to control the size of the digital input box component, with optional values being large、medium、small(default)and mini。
html
<dk-input-number size="large"></dk-input-number>
<dk-input-number size="medium"></dk-input-number>
<dk-input-number size="small"></dk-input-number>
<dk-input-number size="mini"></dk-input-number>展开
Maximum and minimum values
max Property is used to set the maximum value of the numeric input box,min Property is used to set the minimum value of the numeric input box.
html
<dk-input-number :max="10" :min="0"></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
step
step Property is used to set the step size of the numeric input box, which defaults to 1。
html
<dk-input-number :step="2"></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
accuracy
precision Property is used to set the precision of the numeric input box, which defaults to 0。
html
<dk-input-number :precision="2"></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
Strict mode
strict Property is used to set the strict mode of the numeric input box, when strict Attribute is true , The value in the input box can only enter the set step size value.
html
<dk-input-number :step="2" strict></dk-input-number>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref(0)
return {
value
}
}
})
</script>展开
attribute
| parameter | explain | type | Optional values | Default value |
|---|---|---|---|---|
v-model | v-model | number | — | — |
size | Input box size | string | large medium small mini | small |
disabled | Is the state disabled | boolean | — | false |
max | Set maximum value | number | — | Infinity |
min | Set minimum value | number | — | -Infinity |
step | Set Step Size | number | — | 1 |
precision | Numerical accuracy | number | — | 0 |
strict | Is it strict mode? In strict mode, the value in the input box can only enter the set step size value | boolean | — | false |
Event
| Event Name | explain | Callback Arguments |
|---|---|---|
change | Triggered when the binding value changes | value |
Contributors
