element el-input 二次封装

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

全局注册

components/index.js

main.js 中引入

import Components from '@/components'
Vue.use(Components)
1
2

组件中使用

<inputView
  v-model="propertyForm.count"
  style="width: 80px; margin: 0 10px"
  type="num"
  :maxlength="5"
>inputView>
 
<inputView
  v-model="formInline.riskName"
  placeholder="请输入"
>inputView>
1
2
3
4
5
6
7
8
9
10
11

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74