vue 더블 클릭 이벤트 2.0 이벤트 감청(클릭-더블 클릭-마우스 이벤트) 및 이벤트 수식자 조작

Vue 이벤트 처리 방법
DOM 이벤트를 v-on 명령으로 감청하고 트리거할 때 JavaScript 코드를 실행할 수 있습니다.
v-on:클릭 이벤트
++
- -
v-on:dblclick 더블 클릭 이벤트

++
- -
v-on:mousemove\mouseout 마우스 이벤트

<div class="canvas" @mouseout ="update">
  {{ x }} - {{ y }}
</div>
new Vue({
el:".vue-app",
 data:{
  age: 25,
 x:0,
 y:0
 },
 methods:{
 add:function(inc){
  this.age += inc;
 },
 subtract:function(dec){
  this.age -= dec ;
 },
 update:function(event){
 // console.log(event);
  this.x = event.offsetX;
  this.y = event.offsetY;
 }
 }
}); 

그러나 많은 이벤트 처리 논리가 더욱 복잡해지기 때문에 자바스크립트 코드를 v-on 명령에 직접 쓰는 것은 불가능하다.따라서 v-on은 호출해야 할 방법의 이름을 받을 수 있습니다.
Vue.js 이벤트 수식자
이벤트 처리 프로그램에서 우리가 방법에서 쉽게 이 점을 실현할 수 있지만, 더 좋은 방법은 DOM 이벤트의 세부 사항을 처리하는 것이 아니라 순수한 데이터 논리뿐이다.
이 문제를 해결하기 위해, Vue.js는 v-on에 이벤트 수식자를 제공합니다.이전에 언급한 바와 같이 수식자는 점에서 시작하는 지령 접두사로 표시된다..stop .prevent .capture .self .once .passive

<!--   -->
<p v-on:mousemove.stop> Stop </p>
 
<!--   -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--  A  ，  -->
<p><a v-on:click.prevent ="alert() " href="http://blog.023xs.cn" rel="external nofollow" >blog.023xs.cn</a></p>

주의사항: 수식자를 사용할 때 순서가 중요하다.상응하는 코드는 같은 순서로 생길 것이다.따라서 v-on:click을 사용합니다.prevent.self는 모든 클릭을 막고, v-on:click.self.prevent는 원소 자체에 대한 클릭만 막습니다.
Vue 버튼 수정자
키보드 이벤트를 감청할 때, 우리는 흔히 볼 수 있는 키 값을 검사해야 한다.Vue를 사용하면 키보드 이벤트를 수신할 때 v-on의 키 수정자를 추가할 수 있습니다.

<!--  ， Enter   -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!--  ， ” “ ”    -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

모든 키 별칭:.enter .tab .delete ( “ ” “ ” ) .esc .space .up .down .left .right모든 keyCode를 기억하는 것이 어렵기 때문에 Vue는 가장 자주 사용하는 버튼에 별명을 제공합니다. 물론 전역config를 통해서도 가능합니다.keyCodes 객체 사용자 정의 키 수정자 별칭입니다.
보충 지식: vue는 같은 요소에 click을 연결하고 이벤트 dblclick을 두 번 누르면 서로 다른 논리를 실행합니다
프로젝트를 진행하는 과정에서 필요는 구멍 위치를 클릭하여 팝업 대화상자를 클릭하여 제품 총수를 보고 팝업 대화상자를 두 번 클릭하여 자세한 내용을 보는 것이다.처음에는 직접 클릭과 dblclick을 탭에 썼지만, 어쨌든 클릭 이벤트를 실행합니다
해결 방법: 타이머를 이용하여 대략적인 시간에 더블 클릭 이벤트를 시뮬레이션합니다
html 부분 코드:

 <div class="grid-content">
 <el-button 
　　　　v-for="(item,index) in items" :key="index" 
　　 @click="storageCount(item.id)" 
　　 @dblclick.native="storageDetail(item.id)" 
　　　 class="inline-cell" 
　　 :class="colors[item.status]">
   {{item.id}}</el-button>
 </div>

.native는 구성 요소 루트 요소의 원본 이벤트를 감청하는 데 사용되며, 사용자 정의 구성 요소에 원본 이벤트를 추가합니다.
정부측 맞아요.native 수식자의 해석은 어떤 구성 요소의 루트 요소에서 원본 사건을 감청하고 싶을 수도 있다는 것이다.v-on의 수식자를 사용할 수 있습니다.native
js 부분 코드

<script>
import desDialog from './dialog';
import detailDialog from './detailDialog';
var time = null; //  time  null 
export default {
 name: 'storeTable',
 components: {
 desDialog,
 detailDialog
 },
 props: ['providerid'],
 data() {
 return {
  colors: ['space', 'isBuy'],
  showDialog: false,
  showDialogT: false
 };
 },
 methods: {
　　//  
 storageCount(id) {
  clearTimeout(time); // 
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount', obj);
  }, 300); // 300ms
 },
　　//  ， ， 
 storageDetail(id) {
  clearTimeout(time); // 
  this.showDialogT = !this.showDialogT;
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageDetail', obj);
 },
 close() {
  this.showDialog = false;
 },
 closeT() {
  this.showDialogT = false;
 }
 }
};
</script>

상기 vue 더블 클릭 이벤트 2.0 이벤트 감청(클릭-더블 클릭-마우스 이벤트)과 이벤트 수식자 조작은 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.