记录：el-input需要自定义placeholder的情况下所出现的一些BUG

项目难点：

在项目中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>

以上仅个人理解，如果错误请指出谢谢。

方法不是唯一，实践试出真理。有更好的办法请评论，学习道路无止尽。