[小Tip] el-input 限制输入6位短信验证码

14 阅读1分钟

记录一个小Tip:输入6位短信验证码,限制只能输入6位纯数字。

<template>
  <el-input
    placeholder="请输入验证码"
    type="text"
    maxlength="6"
    :value="smsCode"
    @input="smsCode = $event.replace(/[^\d]/g, '')"
  >
    <el-button slot="suffix" type="text" :disabled="smsSeconds > 0" @click="sendSMSCode">
      <span v-if="smsSeconds > 0"> {{ smsSeconds }}秒后重试 </span>
      <span v-else>获取验证码</span>
    </el-button>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      smsCode: '',
      smsSeconds: 0
    }
  },
  methods: {
    sendSMSCode() {
      //
    }
  }
}
</script>

可复制以上代码在我的码上掘金 element-ui-playground 运行查看效果: