vue에서 el-input 키보드 키보드 연결 버튼 (키 수정부호)
vue는 키 값을 수식자로 사용할 수 있습니다. 예를 들어 리턴 이벤트를 감청하는 데는 다음과 같은 두 가지 방법이 있습니다.
<input type="text" @keyup.13="console.log($event)"></input>
<input type="text" @keyup.enter="console.log($event)"></input>
해결 방법: 더하기.네이티브 원생 이벤트 수식자만 있으면 됩니다..native: 구성 요소 루트 요소의 원본 이벤트를 감청하는데, 사용자 정의 구성 요소에 원본 이벤트를 추가하는 것이 주요 역할입니다.
vue와 elementUI에서 el-input에 키보드 키 코드를 다음과 같이 바인딩합니다.
<el-input placeholder=" " clearable v-model="queryObj.shopname" @keyup.enter.native="query">
<template slot="prepend"> </template>
</el-input>
별칭 수식자
키 값 수식자
대응 버튼
.delete
.8/.46
체크백/삭제
.tab
.구
탭
.enter
.십삼
차를 되돌리다
.esc
.27
물러나다
.space
.32
빈칸
.left
.37
왼쪽
.up
.38
올라가다
.right
.39
오른쪽
.down
.사십
하
마우스 버튼 수정자
별칭 수식자
사용 가능한 버전
대응 버튼
.left
2.2.0 이상
좌클릭
.right
2.2.0 이상
우클릭
.middle
2.2.0 이상
가운데 단추
시스템 버튼 수정자
별칭 수식자
사용 가능한 버전
대응 버튼
.ctrl
2.1.0 이상
Ctrl 키
.alt
2.1.0 이상
Alt 키
.shift
2.1.0 이상
Shift 키
.meta
2.1.0 이상
meta 키(Windows 시스템에서 Warm 키)
조합 수식자 사용 정보:
vue는 우리에게 수식자를 조합하는 메커니즘을 제공했지만, 그 사용은 시스템 버튼에 맞추어 수식자를 조합해야만 효력이 발생할 수 있다.테스트 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<button @click.ctrl="ctrlClick" @click="together"> ctrl </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
methods: {
together(event) {
if (!event.ctrlKey) {
console.log('------------- -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
} else {
console.log(' ！')
}
},
ctrlClick(event) {
console.log('------------- -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
console.log('Ctrl ！')
}
}
})
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
