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>