Merge pull request #61 from haibiao-gu/main
feat(cl-input): 添加数字输入精度控制功能
This commit is contained in:
@@ -59,6 +59,16 @@
|
|||||||
</cl-input>
|
</cl-input>
|
||||||
</demo-item>
|
</demo-item>
|
||||||
|
|
||||||
|
<demo-item :label="t('保留精度')">
|
||||||
|
<demo-tips>当 type 为 number 时,可设置 precision 属性来保留精度</demo-tips>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('精度')">
|
||||||
|
<cl-input-number v-model="precision"></cl-input-number>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-input type="number" :precision="precision"></cl-input>
|
||||||
|
</demo-item>
|
||||||
|
|
||||||
<demo-item :label="t('自定义')">
|
<demo-item :label="t('自定义')">
|
||||||
<cl-input
|
<cl-input
|
||||||
v-model="content"
|
v-model="content"
|
||||||
@@ -128,6 +138,8 @@ const isRightIcon = ref(false);
|
|||||||
const isDisabled = ref(false);
|
const isDisabled = ref(false);
|
||||||
const isColor = ref(false);
|
const isColor = ref(false);
|
||||||
|
|
||||||
|
const precision = ref<number>(2);
|
||||||
|
|
||||||
function toAlert() {
|
function toAlert() {
|
||||||
ui.showToast({
|
ui.showToast({
|
||||||
message: "Hello"
|
message: "Hello"
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
'cl-input--border': border,
|
'cl-input--border': border,
|
||||||
'cl-input--focus': isFocus,
|
'cl-input--focus': isFocus,
|
||||||
'cl-input--disabled': isDisabled,
|
'cl-input--disabled': isDisabled,
|
||||||
'cl-input--error': isError
|
'cl-input--error': isError,
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
@tap="onTap"
|
@tap="onTap"
|
||||||
@@ -28,7 +28,8 @@
|
|||||||
:class="[
|
:class="[
|
||||||
{
|
{
|
||||||
'is-disabled': isDisabled,
|
'is-disabled': isDisabled,
|
||||||
'is-dark': isDark
|
'is-dark': isDark,
|
||||||
|
'is-exceed': isExceed
|
||||||
},
|
},
|
||||||
ptClassName
|
ptClassName
|
||||||
]"
|
]"
|
||||||
@@ -189,6 +190,11 @@ const props = defineProps({
|
|||||||
holdKeyboard: {
|
holdKeyboard: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
// 保留精度
|
||||||
|
precision: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -256,6 +262,17 @@ const showClear = computed(() => {
|
|||||||
// 是否显示密码
|
// 是否显示密码
|
||||||
const isPassword = ref(props.password);
|
const isPassword = ref(props.password);
|
||||||
|
|
||||||
|
// 是否超出限制
|
||||||
|
const isExceed = computed(() => {
|
||||||
|
// 检查数字精度是否超出限制
|
||||||
|
if (props.type == "number" && props.precision >= 0 && value.value != "") {
|
||||||
|
const parts = value.value.split(".");
|
||||||
|
return parts.length > 1 && parts[1].length > props.precision;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 切换密码显示状态
|
// 切换密码显示状态
|
||||||
function showPassword() {
|
function showPassword() {
|
||||||
isPassword.value = !isPassword.value;
|
isPassword.value = !isPassword.value;
|
||||||
@@ -271,6 +288,17 @@ function onFocus(e: UniInputFocusEvent) {
|
|||||||
function onBlur(e: UniInputBlurEvent) {
|
function onBlur(e: UniInputBlurEvent) {
|
||||||
emit("blur", e);
|
emit("blur", e);
|
||||||
|
|
||||||
|
// 处理数字精度
|
||||||
|
if (props.type == "number" && props.precision > 0 && value.value != "") {
|
||||||
|
const numValue = parseFloat(value.value);
|
||||||
|
if (!isNaN(numValue)) {
|
||||||
|
const formattedValue = numValue.toFixed(props.precision);
|
||||||
|
value.value = formattedValue;
|
||||||
|
emit("update:modelValue", formattedValue);
|
||||||
|
emit("change", formattedValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isFocus.value = false;
|
isFocus.value = false;
|
||||||
}, 0);
|
}, 0);
|
||||||
@@ -367,6 +395,14 @@ defineExpose({
|
|||||||
&.is-dark {
|
&.is-dark {
|
||||||
@apply text-white;
|
@apply text-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-exceed {
|
||||||
|
@apply text-red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-exceed.is-dark {
|
||||||
|
@apply text-red-400;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
|
|||||||
@@ -29,4 +29,5 @@ export type ClInputProps = {
|
|||||||
adjustPosition?: boolean;
|
adjustPosition?: boolean;
|
||||||
maxlength?: number;
|
maxlength?: number;
|
||||||
holdKeyboard?: boolean;
|
holdKeyboard?: boolean;
|
||||||
|
precision?: number;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user