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-inputv-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_inpuutlabel="测试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>