输入数字或字母
1***@qq.com
- 发布：2023-10-07 16:51
- 更新：2023-10-07 16:51
- 阅读：268
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 10
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： 小米10S
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： CLI
CLI版本号： 3.8
操作步骤：
预期结果：
input输入框在input事件中修改v-model绑定的值，页面值与实现数据都变化。
input输入框在input事件中修改v-model绑定的值，页面值与实现数据都变化。
实际结果：
input输入框在input事件中修改v-model绑定的值，实际数据值变化，页面值不变化。
input输入框在input事件中修改v-model绑定的值，实际数据值变化，页面值不变化。
bug描述：
<template>
<input class="my-input" type="text" :value="cdata" @input="cInput" />
</template>
<script>
export default {
props: {
config: {
type: Object,
default: () => {
return {};
},
},
value: {},
},
name: "",
watch: {
config: {
handler(val) {
const { viewConfig } = val;
if (!viewConfig) return;
this.initForm(viewConfig);
},
immediate: true,
},
value: {
handler(val) {
this.cdata = val;
},
immediate: true,
},
},
data() {
return {
cdata: null,
placeholder: "",
scale: 0,
};
},
methods: {
cInput(e) {
// 校验长度， 大小等
const val = e.detail.value;
const { constraints } = this.config;
if (Array.isArray(constraints) && constraints.length) {
let flag = false;
constraints.forEach((it) => {
const { name } = it;
// 数字范围
if (name == "range") {
if (it.max && val > it.max) flag = true;
}
if (name == "length") {
if (it.max && val.length > it.max) flag = true;
}
});
if (flag) {
this.cdata = null;
this.$emit("input", this.cdata);
return;
}
}
// 整数
if (val === "") return;
if (this.scale == 0) {
const gg = val.match(/\d+/);
if (!gg) {
this.cdata = "";
} else {
this.cdata = gg[0];
}
} else {
const gg = val.match(new RegExp("\\d+\\.?\\d{0," + this.scale + "}"));
if (!gg) {
this.cdata = "";
} else {
this.cdata = gg[0];
console.log("this.cdata", this.cdata);
}
}
this.$emit("input", this.cdata);
this.$nextTick(() => {
this.$forceUpdate();
});
},
initForm(data) {
const { scale, type, placeholder } = data;
if (placeholder) this.placeholder = placeholder;
else this.placeholder = "";
if (type == "integer") {
this.scale = 0;
}
if (!isNaN(scale) || scale == 0) {
this.scale = Math.floor(scale);
}
},
},
};
</script>
<style lang="scss" scoped>
.my-input {
text-align: right;
::v-deep .uni-easyinput__content-input {
height: auto;
}
}
</style>
0 个回复