禁止浏览器自动填充el-input(vue3)

<el-input
  placeholder="手机号"
  name="login-phone"
  readonly  // 禁止自动填充相关
  v-removeReadonly // 禁止自动填充相关
  v-focus="900" // focus
  size="medium"
  v-model.trim="formRule.phone"
>
  <template #prefix>
    <img
      class="icon-image"
      src="../../assets/images/login/user.png"
      alt=""
    />
  </template>
</el-input>

// 先readonly，再删除readonly属性可以解决浏览器的自动填充
export const removeReadonly = {
  mounted(el, binding) {
    let element = el.getElementsByClassName("el-input__inner")[0];
    element.addEventListener("focus", function(e) {
      this.removeAttribute("readonly");
    });
  }
};

// 自动获取光标的指令
export const focus = {
  mounted(el, binding) {
    let time = binding.value || 0;
    let timer;
    if (timer) {
      clearTimeout(timer);
    }
    setTimeout(() => {
      let element = el.getElementsByClassName("el-input__inner")[0];
      element.focus();
    }, time);
  }
};