element el-input 二次封装

说明：为实现输入限制，不可输入空格，长度限制。

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)

组件中使用

<inputViewv-model="propertyForm.count"style="width: 80px; margin: 0 10px"type="num":maxlength="5"
></inputView><inputViewv-model="formInline.riskName"placeholder="请输入"
></inputView>