일일 개발 프로세스에서 문제가 발생할 수 있습니다. ElementUI의 el 형식 형식에서 el 입력 입력 상자가 하나만 있는 경우 값을 입력하고 Enter 키를 누르면 페이지가 새로 고쳐집니다. 이는 양식 요소에 입력 상자가 하나만 있을 때 Enter 키를 누르면 W3C 표준에 규정된 양식의 기본 제출 이벤트가 트리거되기 때문입니다.
해결책:
ElementUI도 솔루션을 제공합니다. 이 기본 동작을 방지하려면 <el-form>태그에 추가 할 수 있습니다 @submit.native.prevent. 예를 들어:
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
그러나 위의 방법은 기본 동작을 방지할 뿐이며 양식을 제출하기 위해 입력해야 하는 경우 다음 방법으로 해결할 수 있습니다.
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent="() => submit('form')"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
다음 사항에 유의하십시오.
- 네이티브 이벤트를 차단하기 위해 반드시 사용하세요
@submit.native.prevent. 실행 방식은 검색 버튼의 클릭 이벤트입니다. - 검색 버튼은 el-form으로 래핑해야 합니다.
- 검색 버튼의 클릭 이벤트 제거
native-type="submit"속성을 추가했는지 확인하십시오.
또한 원본 양식 양식의 단일 입력 및 양식 패키지 엘 입력 캐리지 리턴 새로 고침 문제도 해결할 수 있으며 다음과 같은 방법이 있습니다.
-
양식에 숨겨진 입력 상자를 추가하고 숨겨진 입력 필드를 정의하거나 CSS 스타일을 통해 숨길 수 있습니다.
-
입력 상자의 캐리지 리턴 이벤트를 제거합니다(요구 사항에 따라 일부는 쿼리를 위해 양식을 제출하거나 다른 작업을 수행하기 위해 캐리지 리턴 이벤트가 필요하며 이 방법은 적용되지 않음).
-
양식 기본 제출 이벤트를 방지합니다. 예를 들어 기본 양식 내 입력의 기본 제출 이벤트를 방지하려면 onsubmit 핸들러를 사용하여 false를 반환합니다.
모든 사람이 이 문제를 더 잘 이해하고 해결할 수 있도록 Enter 키를 눌러 페이지를 새로 고치는 이 문제에 대한 ElementUI의 공식 솔루션을 참조할 수 있습니다.오픈 소스 주소는 다음과 같습니다.
이러한 방법이 ElementUI의 입력 및 캐리지 리턴에 의해 트리거되는 페이지 새로고침 문제를 해결하는 데 도움이 되기를 바랍니다. 추가 질문이 있거나 추가 지원이 필요한 경우 언제든지 문의하십시오.