如何使标签一直得不到焦点或者不再触发blur的事件

Question

前端注册表格中电话一栏input绑定了一个失去焦点事件，去数据库查看是否被注册，如果没有注册则发送短信按钮可以点击，

点击了之后我想要这个电话一栏不允许被修改，我使用了readonly。

问题是虽然内容改不了，但每次点击input还是会触发失去焦点事件，一直去数据库比对手机是否注册。
没有使用disbaled，因为用了disbaled这个input表单提交的时候就获取不到了。
请问大家有什么方法可以点击发送验证码后使这个标签一直就得不到焦点或者不再触发blur的事件。

Answer 1

定义一个变量，input框的readonly属性绑定此变量，方法中判断一下如果这个变量如果是true，直接return。

<template>
  <el-input :readonly="readonly" />
</template>

<script>
export default {
  data() {
    return {
      readonly: false
    };
  },
  methods: {
    msg() {
      if (this.readonly) return;
      // 发送短信
      // 成功后把 readonly 改为 true
      this.readonly = true;
    }
  }
};
</script>