InputNumber
input-number用来做金额/比例的增长输入框
演示
基础用法
<template>
<div class="row">
<div>
<span class="tips">基础用法</span>
<cl-input-number v-model="form.num1" />
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const form = reactive({
num1: null
})
</script>
<style lang="scss" scoped>
.row {
display: flex;
justify-content: space-between;
.tips {
display: block;
}
.cl-input {
margin-top: 12px;
}
}
</style>
控制器位置:左右、右侧上下、不显示
<template>
<div>
<span class="tips">控制器位置:左右、右侧上下、不显示</span>
<cl-input-number v-model="form.value1" layout="between" />
<br />
<cl-input-number v-model="form.value2" layout="right" />
<br />
<cl-input-number v-model="form.value3" layout="none" />
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const form = reactive({
value1: null,
value2: null,
value3: null
})
</script>
<style lang="scss" scoped>
.tips {
display: block;
}
.cl-input-number {
margin-top: 12px;
}
</style>
数字限制precision 的值必须是一个非负整数,并且不能小于 step 的小数位数
正整数
正数且是两位小数
<template>
<div class="wrap">
<span class="tips">数字限制</span>
<span class="tips">precision 的值必须是一个非负整数,并且不能小于 step 的小数位数</span>
<div class="row">
<div>
<span class="tips">正整数</span>
<cl-input-number v-model="form.num1" :min="0" :step="1" :precision="0" />
</div>
<div>
<span class="tips">正数且是两位小数</span>
<cl-input-number v-model="form.num2" :min="0" :step="0.1" :precision="2" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const nameRef = (ref < HTMLElement) | (null > null)
const specialRef = (ref < HTMLElement) | (null > null)
const form = reactive({
num1: 0,
num2: 0.01
})
// todo
const getFocus = () => {
nameRef.value && nameRef.value.focus()
}
// todo
const blurFocus = () => {
specialRef.value && specialRef.value.focus()
}
</script>
<style lang="scss" scoped>
.wrap {
.row {
display: flex;
justify-content: space-between;
}
.tips {
display: block;
}
.cl-input {
margin-top: 12px;
}
}
</style>
input props
名称 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|
v-model | string | - | - | |
min | number | Infinity | - | 设置计数器允许的最小值 |
max | number | Infinity | - | 设置计数器允许的最大值 |
step | number | - | 计数器步长 | |
placeholder | string | 请输入 | - | 输入框占位文本 |
clearable | boolean | true | - | 是否可清空 |
disabled | boolean | false | - | 禁用 |
readonly | boolean | false | - | 只读 |
precision | number | - | - | 数值精度 |
layout | string | true | between, right, none | 控制按钮位置 |
inputWidth | number | 240 | - | input的宽度 |
size | string | 'small'| 'medium'| 'large' | 'medium' | 输入框尺寸变化 |
Events 参数描述
事件 | 描述 | 回调参数 |
---|---|---|
blur | 在 Input 失去焦点时触发 | (event: Event) |
focus | 在 Input 获得焦点时触发 | (event: Event) |
change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string |
input | 在 Input 值改变时触发 | (value: string |
clear | 在点击由 clearable 属性生成的清空按钮时触发 | - |
Methods 参数描述
事件 | 描述 | 回调参数 |
---|---|---|
focus | 使 input 获取焦点 | - |
blur | 使 input 失去焦点 | - |