快捷導(dǎo)航

vue中el-input綁定鍵盤按鍵(按鍵修飾符)

更新時(shí)間：2020年07月22日 09:44:18 作者：linz

這篇文章主要介紹了vue中el-input綁定鍵盤按鍵(按鍵修飾符)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue怎么寫鍵盤事件

vue允許將按鍵值作為修飾符來使用，如監(jiān)聽回車事件，有兩種寫法，如下代碼：

<input type="text" @keyup.13="console.log($event)"></input>

<input type="text" @keyup.enter="console.log($event)"></input>

但要注意的是：當(dāng)我們?cè)谠趀l-input采用如上兩種寫法時(shí)，他是不生效的。el-input監(jiān)聽不到鍵盤事件,原因是element-ui是封裝組件，所以el標(biāo)簽屬于自定義標(biāo)簽，因此觸發(fā)不了鍵盤事件。

解決辦法：加上.native原生事件修飾符即可。.native：監(jiān)聽組件根元素的原生事件，主要作用是給自定義的組件添加原生事件。
vue與elementUI中給el-input綁定鍵盤按鍵代碼如下：

<el-input placeholder="店鋪名稱" clearable v-model="queryObj.shopname" @keyup.enter.native="query">
 <template slot="prepend">店鋪名稱</template>
</el-input>

常用按鍵修飾符

別名修飾符	鍵值修飾符	對(duì)應(yīng)按鍵
.delete	.8/.46	回格/刪除
.tab	.9	制表
.enter	.13	回車
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

鼠標(biāo)按鍵修飾符

別名修飾符	可用版本	對(duì)應(yīng)按鍵
.left	2.2.0以上	左鍵
.right	2.2.0以上	右鍵
.middle	2.2.0以上	中鍵

系統(tǒng)按鍵修飾符

別名修飾符	可用版本	對(duì)應(yīng)按鍵
.ctrl	2.1.0以上	Ctrl鍵
.alt	2.1.0以上	Alt鍵
.shift	2.1.0以上	Shift鍵
.meta	2.1.0以上	meta鍵（Windows系統(tǒng)上為田鍵）

關(guān)于組合修飾符的使用：

vue為我們提供了組合修飾符的機(jī)制，但是它的使用，必須配合系統(tǒng)按鍵修飾符才可以生效。如下是一段測(cè)試代碼：

<!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/vue@2.5.16/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>

到此這篇關(guān)于vue中el-input綁定鍵盤按鍵(按鍵修飾符)的文章就介紹到這了,更多相關(guān)el-input綁定鍵盤按鍵內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue表情輸入組件微信face表情組件
這篇文章主要為大家詳細(xì)介紹了Vue表情輸入組件，微信face表情組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見問題解決方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案,關(guān)于這個(gè)問題,通常是由于插件名稱輸入錯(cuò)誤、網(wǎng)絡(luò)問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue中插槽Slot基本使用與具名插槽詳解
有時(shí)候我們希望在指定的位置輸出我們的子元素,這時(shí)候具名插槽就排上了用場(chǎng),這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下
2023-09-09
詳解Vue3的虛擬DOM是如何生成的
這篇文章給大家詳細(xì)介紹了 Vue3 的虛擬DOM生成規(guī)則,文章通過代碼示例和圖片介紹的非常詳細(xì),具有一定的參考價(jià)值,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-09-09
Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入),需要的朋友可以參考下
2023-09-09
vue環(huán)境搭建簡(jiǎn)單教程
這篇文章主要介紹了vue環(huán)境搭建簡(jiǎn)單教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06