vue 키보드 이벤트 클릭 이벤트 가native 작업

다음과 같습니다.


<el-card class="box-card animated flipInY">
   <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="demo-ruleForm">
    <h3 class="login_title"> </h3>
    <el-form-item label=" " prop="account">
     <el-input type="text" v-model="ruleForm2.account" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder=" "></el-input>
    </el-form-item>
    <el-form-item label=" " prop="checkPass">
     <el-input type="password" v-model="ruleForm2.checkPass" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder=" "></el-input>
    </el-form-item>
    <el-checkbox label=" " v-model="checked" class="remember"> </el-checkbox>
    <el-form-item >
     <el-button type="primary" class="login_btn" @click.native.prevent="handleSubmit2" :loading="logining"> </el-button>
    </el-form-item>
   </el-form>
  </el-card>

위 코드와 같이 백그라운드 관리 시스템의 로그인.계정과 비밀번호에 키보드 enter 이벤트를 추가했습니다. 감청할 때 추가해야 합니다.native를 정확하게 사용할 수 있습니다.아래 단추의 클릭 이벤트도 추가해야 합니다.native를 사용해야 정상적으로 사용할 수 있습니다.
공식 문서 참조:
구성 요소의 루트 요소에 원본 사건을 직접 감청하고 싶은 적이 많을 수도 있습니다.이때, 너는 v-on을 사용할 수 있다.네이티브 수식자:

때로는 유용하지만, 과 같은 매우 특정한 원소를 감청하려고 시도할 때, 이것은 결코 좋은 생각이 아니다.예를 들어 상기 구성 요소는 다음과 같은 재구성을 했을 수 있기 때문에 루트 요소는 사실상 요소이다.


<label>
 {{ label }}
 <input
  v-bind="$attrs"
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)"
 >
</label>

이때, 아버지급의.native 감청기는 침묵에 실패합니다.오류가 발생하지 않지만, onFocus 처리 함수는 예상대로 호출되지 않습니다.
이 문제를 해결하기 위해 Vue는 $listeners 속성을 제공합니다. 이 속성에는 이 구성 요소에 작용하는 모든 감청기가 포함되어 있습니다.예:


{
 focus: function (event) { /* ... */ }
 input: function (value) { /* ... */ },
}

이 $listeners 속성이 있으면 v-on = "$listeners"에 맞추어 모든 이벤트 감청기를 이 구성 요소의 특정한 하위 요소로 가리킬 수 있습니다.와 같은 v-model 작업 구성 요소에도 맞출 수 있기를 바랍니다. 이 감청기를 위해 다음 inputListeners와 같은 계산 속성을 만드는 것은 일반적으로 매우 유용합니다.


Vue.component('base-input', {
 inheritAttrs: false,
 props: ['label', 'value'],
 computed: {
  inputListeners: function () {
   var vm = this
   // `Object.assign`  
   return Object.assign({},
    //  
    this.$listeners,
    //  ，
    //  
    {
     //   `v-model`  
     input: function (event) {
      vm.$emit('input', event.target.value)
     }
    }
   )
  }
 },
 template: `
  <label>
   {{ label }}
   <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on="inputListeners"
   >
  </label>
 `
})

현재 구성 요소는 완전히 투명한 패키지입니다. 즉, 일반적인 요소처럼 사용할 수 있습니다. 모든 기능과 감청기는 작동할 수 있습니다.
공식 문서copy를 직접 가져왔습니다. 즉, 구성 요소의 키보드 이벤트를 감청하거나 이벤트를 클릭할 때 추가할 필요가 없습니다.native의, 구성 요소를 감청하려면 추가가 필요합니다.native를 사용할 수 있습니다.하지만 당신이 감청해야 할 내용이 구성 요소의 하위 요소일 때.native도 효력이 발생하지 않습니다. 이때 정부에서 처리하는 방법은 v-on='$listeners'를 사용하는 것입니다.
추가 정보: Vue @keyup 정보.enter.native
코드를 보다가 만났어요.

사실 이거는 쓸 수 있어요.
<
봉인 구성 요소를 사용했다면, 예를 들어element, 이때 단추 수식자를 사용해서 추가해야 한다.native
이 대략적인 뜻은 키보드 리턴 이벤트를 감청하고 해당하는 nextInput 함수를 실행하는 것이다
상기 vue 키보드 이벤트 클릭 이벤트 가native 조작은 여러분에게 공유된 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Fastapi websocket 및 vue 3(Composition API)

1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다