说明:为实现输入限制,不可输入空格,长度限制。
vue2 inputView.vue
<template>
<!-- 输入框 -->
<el-input
:type="type"
:placeholder="placeholder"
v-model="input"
@input="inputChange"
:maxlength="maxlength"
></el-input>
</template>
<script>
export default {
props: {
type: {
type: String,
default: "text",
},
value: {
type: [String, Number],
default() {
return "";
},
},
maxlength: {
type: Number,
default: 30,
},
placeholder: {
type: String,
default: "",
},
},
watch: {
value: {
handler(val) {
this.input = val;
},
deep: true,
},
},
data() {
return {
input: this.value,
};
},
methods: {
inputChange(value) {
this.input = value?.replace(/\s/g, "");
if (this.type === "num") {
// 做数字型的判断,因为采用input 的 Number 类型,最大值还得做单独匹配,偷懒,所以用了num代替
this.input = Number(value?.replace(/\D/g, ""));
}
this.$emit("input", this.input);
},
},
};
</script>
全局注册
components/index.js
main.js 中引入
import Components from '@/components'
Vue.use(Components)
组件中使用
<inputView
v-model="propertyForm.count"
style="width: 80px; margin: 0 10px"
type="num"
:maxlength="5"
></inputView>
<inputView
v-model="formInline.riskName"
placeholder="请输入"
></inputView>
vue3 inputView.vue
<template>
<!-- 输入框 -->
<el-input
:type="props.type"
:placeholder="props.placeholder"
v-model="input"
@input="inputChange"
:maxlength="props.maxlength"
:minlength="props.minlength"
:disabled="props.disabled"
:clearable="props.clearable"
></el-input>
</template>
<script setup>
const props = defineProps({
type: {
type: String,
default: "text",
},
modelValue: {
type: [String, Number],
default() {
return "";
},
},
maxlength: {
type: Number,
default: 30,
},
minlength: {
type: Number
},
placeholder: {
type: String,
default: "",
},
clearable: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['update:modelValue'])
const input = ref('');
watch(() => props.modelValue, (val) => {
input.value = val;
}, {deep: true, immediate: true})
const inputChange = (modelValue) => {
let val = modelValue?.replace(/\s/g, "");
if (props.type === "num") {
val = val?.replace(/[^\d.]/g, "");
let dotPosition = val.indexOf('.');
// 如果有多个小数点,则只保留第一个
if (dotPosition !== -1) {
val = val.slice(0, dotPosition + 1) + val.slice(dotPosition + 1).replace('.', '');
}
if(!isNaN(val)) {
input.value = val;
} else {
input.value = ''
}
} else {
input.value = val;
}
emits("update:modelValue", input.value);
}
</script>