Vue按鍵修飾符,鼠標按鈕修飾符


在一些搜索框中,我們往往需要監聽鍵盤的按下(onkeydown)或抬起(onkeyup)事件以進行一些操作。

在原生js或者jQuery中,我們需要判斷e.keyCode的值來獲取用戶所按的鍵。

按鍵碼

keyCode    實際鍵值
48到57    0到9
65到90    a到z(A到Z)
112到135    F1到F24
8    BackSpace(退格)
9    Tab
13    Enter(回車)
20    Caps_Lock(大寫鎖定)
32    Space(空格鍵)
37    Left(左箭頭)
38    Up(上箭頭)
39    Right(右箭頭)
40    Down(下箭頭)

按鍵碼示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>按鍵碼</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        input {
            display: block;
            margin: 10px;
        }
    </style>
    <body>
        <div id="app">
            <!-- 只有在 keyCode 是 13 時調用 app.listener() -->
            <input v-on:keyup.13="listener($event, 'Enter1')" placeholder="Enter1">

            <!-- 同上 -->
            <input v-on:keyup.enter="listener($event, 'Enter2')" placeholder="Enter2">

            <!-- 縮寫語法 -->
            <input @keyup.enter="listener($event, 'Enter3')" placeholder="Enter3">
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            listener: function(e, msg) {
                const current = e.currentTarget.nodeName
                console.log(`${current} ${msg}`)
            },
        },
    });
</script>

 

修飾符

Vue 提供了絕大多數常用的按鍵碼的別名,允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符:

別名    實際鍵值
.delete    delete(刪除)/BackSpace(退格)
.tab    Tab
.enter    Enter(回車)
.esc    Esc(退出)
.space    Space(空格鍵)
.left    Left(左箭頭)
.up    Up(上箭頭)
.right    Right(右箭頭)
.down    Down(下箭頭)
.ctrl    Ctrl
.alt    Alt
.shift    Shift
.meta    (window系統下是window鍵,mac下是command鍵)

Vue中還支持組合寫法:

組合寫法    按鍵組合
@keyup.alt.67=”function”    Alt + C
@click.ctrl=”function”    Ctrl + Click
@keyup.ctrl.c=”function”    Ctrl + C
@keyup.ctrl.c+@keyup.c=”function”    Ctrl + C

修飾符示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>修飾符</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        input {
            display: block;
            margin: 10px;
        }
    </style>
    <body>
        <div id="app">
            <!-- 組合鍵示例 -->
            <!-- 按Ctrl + 任意鍵 -->
            <input @keyup.ctrl="listener($event, 'Ctrl+任意鍵')" placeholder="Ctrl+任意鍵">

            <!-- 按Ctrl + C -->
            <input @keyup.ctrl.67="listener($event, 'Ctrl+C')" placeholder="Ctrl+C">
            <input type="button" @keyup.ctrl.c="listener($event, 'Ctrl+C')" value="Ctrl+c">
            <input type="button" @keyup.ctrl+@keyup.c="listener($event, 'Ctrl+C')" value="Ctrl+c">
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            listener: function(e, msg) {
                const current = e.currentTarget.nodeName
                console.log(`${current} ${msg}`)
            },
        },
    });
</script>

與按鍵別名不同的是,修飾鍵和 keyup 事件一起用時,事件引發時必須按下正常的按鍵。換一種說法:如果要引發 keyup.ctrl,必須按下 ctrl 時釋放其他的按鍵;單單釋放 ctrl 不會引發事件。

 

.native

注意!!!如果用了封裝組件的話,比如element,這個時候使用按鍵修飾符需要加上.native覆蓋原有封裝的keyup事件即可

比如: 

<el-input v-model="account" placeholder="請輸入賬號" @keyup.enter.native="search()"></el-input>

可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽

 

2.5.0 新增 .exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>.exact修飾符</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        button {
            display: block;
            margin: 10px;
        }
    </style>
    <body>
        <div id="app">
            <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
            <button v-on:click.ctrl="listener($event, '1')">即使 Alt 或 Shift 被一同按下時也會觸發</button>
            
            <!-- 有且只有 Ctrl 被按下的時候才觸發 -->
            <button v-on:click.ctrl.exact="listener($event, '2')">有且只有 Ctrl 被按下的時候才觸發</button>
            
            <!-- 沒有任何系統修飾符被按下的時候才觸發 -->
            <button v-on:click.exact="listener($event, '3')">沒有任何系統修飾符被按下的時候才觸發</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            listener: function(e, msg) {
                const current = e.currentTarget.nodeName
                console.log(`${current} ${msg}`)
            },
        },
    });
</script>

 

鼠標按鈕修飾符

.left  點擊鼠標左鍵即可觸發事件
.right  點擊鼠標右鍵即可觸發事件
.middle  按下滑輪觸發事件

這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>鼠標按鈕修飾符</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        button {
            display: block;
            margin: 10px;
        }
    </style>
    <body>
        <div id="app">
            <!-- 點擊鼠標左鍵即可觸發事件 -->
            <button v-on:click.left="listener($event, 'left')">點擊鼠標左鍵即可觸發事件</button>

            <!-- 點擊鼠標右鍵即可觸發事件 -->
            <button v-on:click.right="listener($event, 'right')">點擊鼠標右鍵即可觸發事件</button>

            <!-- 按下滑輪觸發事件 -->
            <button v-on:click.middle="listener($event, 'middles')">按下滑輪觸發事件</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            listener: function(e, msg) {
                const current = e.currentTarget.nodeName
                console.log(`${current} ${msg}`)
            },
        },
    });
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM