TypeScript 回車觸發聚焦 @keyup.enter.native

1.vue登錄界面輸入用戶名回車自動聚焦密碼框

 

用戶框里放：@keyup.enter.native="submitForm('formInline')";

密碼框里放:：ref="password"

登錄數據:

formInline: {
   userName: '',
   password: '',
}

回車綁定事件：

submitForm(formName: string): void {
      if (this.formInline.userName !== '' && this.formInline.password === '') {
        // 聚焦密碼
        (this.$refs as HTMLFormElement).password.focus();
      }
      if (this.formInline.userName === '' && this.formInline.password !== '') {
        // 聚焦用戶名
        (this.$refs as HTMLFormElement).userName.focus();
      }

      // 數據驗證
      (this.$refs[formName] as HTMLFormElement).validate((valid: boolean) => {
        if (valid) {
          retrn true;
        }
      });
    },

[e-mail]跟@keyup.enter區別

直接在根元素上綁定可以用@keyup.enter

如果使用的封裝組件，例如element的el-input就必須使用@keyup.enter.native