VUE3封装EL-ELEMENT-PLUS input组件

VUE3封装EL-ELEMENT-PLUS input组件

完整代码

<template>
  <div>
    <div>
      <div class="lable_top" v-if="label">
        <label :class="lable_sty">{{ label }}</label>
      </div>
      <el-input
        v-model="inputValue"
        @input="emitInput"
        :clearable="clearables"
        :style="{ width: width }"
        :rows="height"
        :type="textType"
        :class="input_sty"
        :placeholder="placeholder"
        :maxlength="maxlength"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, toRefs } from "vue";
import {
  btKeyUpSpecChar,
  isChina,
  isNumber,
  isLetterAndNumber,
} from "@/utils/verification";

const state = reactive({
  lable_sty: "lable_sty",
  input_sty: "input_sty",
  lable_width: " ",
});

const { lable_sty, input_sty, lable_width } = toRefs(state);
const Rulecheck = ref(null);
const clearables = ref();
onMounted(() => {
  VerifyTextType();
  lable_width.value = props.lable_width;
  Rulecheck.value = props.verifyText;
  // 清除按钮
  if (props.clearable == "true") {
    clearables.value = true;
  } else if (props.clearable == "false") {
    clearables.value = false;
  } else {
    console.log("clearable输入有误:", props.clearable);
  }
});
const emit = defineEmits(["update:modelValue"]);
let props = defineProps({
  width: {
    type: String,
    default: "200px",
  },
  value: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 1,
  },
  label: {
    type: String,
  },
  lable_width: {
    type: String,
    default: "100px",
  },
  placeholder: {
    type: String,
    default: "",
  },
  maxlength: {
    type: Number,
    default: 15,
  },
  verifyText: {
    type: String,
  },
  clearable: {
    type: String,
    default: "true",
  },
});

// 高度
const textType = ref("text");
function VerifyTextType() {
  if (props.height > 1) {
    textType.value = "textarea";
    lable_sty.value = "lable_sty1";
    input_sty.value = "input_sty1";
  } else {
    textType.value = "text";
    lable_sty.value = "lable_sty";
    input_sty.value = "input_sty";
  }
}

// 监听文本框输入
const inputValue = ref(props.modelValue);
watch(
  () => props.modelValue,
  (newValue) => {
    inputValue.value = newValue;
  }
);
const emitInput = () => {
  // 多个正则匹配
  if (Rulecheck.value) {
    var multi = Rulecheck.value.split(",");
    for (let index = 0; index < multi.length; index++) {
      switch (multi[index]) {
        case "isLetterAndNumber":
          inputValue.value = isLetterAndNumber(inputValue.value);
          break;
        case "isChina":
          inputValue.value = isChina(inputValue.value);
          break;
        case "isNumber":
          inputValue.value = isNumber(inputValue.value);
          break;
        default:
          break;
      }
    }
  }
  inputValue.value = btKeyUpSpecChar(inputValue.value);
  emit("update:modelValue", inputValue.value);
};
</script>

<style lang="scss" scoped>
.lable_top {
  display: inline-block;
  width: v-bind(lable_width);
  text-align: right;
}
.lable_sty {
  font-weight: normal !important;
  font-size: 14px;
  color: #606266;
  display: inline-block;
}
.lable_sty1 {
  font-weight: normal !important;
  font-size: 14px;
  color: #606266;
  display: inline-block;
  vertical-align: text-top;
}
.input_sty {
  margin-left: 10px;
}
.input_sty1 {
  margin-left: 10px;

  vertical-align: text-top;
}
</style>

使用

<template>
  <div class="app-container">
    <general_inpuut v-model="acc" clearable="false" />
    <general_inpuut label="船舶编码:" v-model="acc" width="500px" />
    <general_inpuut
      label="测试2:"
      v-model="acc"
      width="600px"
      placeholder="请输入备注"
      maxlength="100"
      height="3"
      verifyText="isNumber"
    />

    <el-button @click="btn_change">获取值</el-button>
  </div>
</template>

<script setup>
const acc = ref();

function btn_change() {
  console.log("acc.value", acc.value);
}
</script>