项目难点:
在项目中UI给出了这一种必填输入框:
需要在placeholder中增加必填星号且颜色为红色
在使用中文输入法的时候,情况如下:
并没有实际确认下去输入的内容,输入框的input和change事件监听不到用户正在输入。
解决办法:
通过compositionstart、compositionupdate、compositionend三个事件对输入框进行监听
compositionstart:用户输入开始,仅第一次触发
compositionupdate:用户输入中,每次触发
compositionend:用户输入结束,结束触发
在事件返回值中
data:正在输入的内容
isTrusted:用户输入是否结束
隐藏placeholder条件:
条件一:在用户输入结束后且输入框内没有内容的时候
条件二:输入框内没有内容
代码如下:
<template>
<div id="c_input">
<el-input
v-model="propValue"
@input="handleInput"
@compositionstart="oncomposition"
@compositionupdate="oncomposition"
@compositionend="oncomposition"
></el-input>
<span class="placeholder" v-show="isShow" :class="{ require: required }">
{{ placeholder }}
</span>
</div>
</template>
<script>
export default {
name: "c_input",
data() {
return {
isShow: true,
propValue: this.value,
};
},
props: {
value: [String, Number],
placeholder: [String, Number],
required: Boolean,
number: Boolean,
},
watch: {
propValue(ev) {
this.isShow = ev.length === 0;
},
},
methods: {
handleInput(ev) {
if (this.number) this.propValue = String(this.propValue).replace(/\D/g, "");
this.$emit("input", this.number ? ev.replace(/\D/g, "") : ev);
},
oncomposition(ev) {
this.isShow = (!ev.isTrusted && !this.propValue) || ev.data.length === 0;
},
},
};
</script>
<style scoped>
#c_input {
position: relative;
}
.el-input {
position: relative;
z-index: 2;
}
.placeholder {
display: inline-block;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
user-select: none;
cursor: text;
color: #c0c4cc;
font-size: 14px;
z-index: 1;
}
.require::after {
content: "*";
font-size: 14px;
color: #d40000;
position: relative;
left: 4px;
top: 2px;
}
</style>
<style>
#c_input .el-input__inner {
background-color: transparent !important;
}
</style>
以上仅个人理解,如果错误请指出谢谢。
方法不是唯一,实践试出真理。有更好的办法请评论,学习道路无止尽。