21鼠标按键饰修符

叁歲伎倆 2023-10-06 20:33 5阅读 0赞

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

#### \[基础\]Vue绑定事件详讲-按键、鼠标饰修符 ####

*  前言
 *  构建初始页面
 *   *  在模板中的中绑定键盘按下时响应 keydown
     *  单个按键修饰符
     *  鼠标修饰符

## 前言 ##

本文主要的内容会讲一下事件绑定中的`按键修饰符`和`鼠标修饰符`。

它们对应的是在使用特点的某个按键时才会用到。

这节的内容在工作中也是比较常用的，比如按下回车键时触发表达提交，按下鼠标右键时弹出选项菜单，都是工作中用得到的。

## 构建初始页面 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo21</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
           
        data(){
          
            return{
          }
        },
        methods:{
          
        },
        template:`
            <div>
                <input />
            </div>
            ` 
        }) 
        const vm=app.mount("#app")
    </script>
    </html>

### 在模板中的中绑定键盘按下时响应 keydown ###

然后在 `methods` 部分加入一个方法 `handleKeyDwon( )`，具体内容只是在控制台打印出来`keydown`。

methods:{
        
        handleKeyDown(){
        
            console.log('keydow....')
        }
    },

然后在模板中的 `<input />`中绑定键盘按下时响应 `keydown`。

template:`
        <div">
            <input @keydown="handleKeyDown"/>
        </div>
        `

![在这里插入图片描述][eab5f06593374449b6278c8f98892751.gif_pic_center]

### 单个按键修饰符 ###

单个按键修饰符：  
顾名思义，就是指定键盘上某个特殊的按键时才会响应事件方法。

如果现在的需求是，上面的代码只有在按下回车时，才在控制台进行打印，这时候就需要按键修饰符了。

我们学的第一个按键修饰符 `enter`

template:`
        <div">
            <input @keydown.enter="handleKeyDown"/>
        </div>
        `

类似这样只响应单个按键的修饰符有很多

`enter 、tab、delete、esc、up、down、left、right`

这些你可以通过上面的列子，自行测试，我这里不在赘述。

### 鼠标修饰符 ###

除了`按键修饰符`，还有`鼠标修饰符`，就是按下鼠标上的某个键时，才会响应。

最常用的就是:`left、right、middle`

现在的需求是在页面上写 willem，然后只有用鼠标右键点击时，才会弹出 `alert()`。

先在 `methods` 里编写一个 `handleClick` 方法。

methods:{
        
       //...
        handleClick(){
        
            alert('click')
        }
    },

然后在模板中使用鼠标修饰符，确定只有点击鼠标右键时才会响应。

<div @click.right="handleClick">willem</div>

![在这里插入图片描述][919dfac19f9442ccbf0e499ebb2b57d3.png]

实例文档

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo21</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
         
        data(){
        
            return{
        }
        },
        methods:{
        
            handleClick(){
        
                alert('click');
            }
        },
        template:`
            <div>
                <div @click.right="handleClick">willem</div>
            </div>
            ` 
        })
        const vm=app.mount("#app")
    </script>
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/43610b428f4346979803d26bc6c49768.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[eab5f06593374449b6278c8f98892751.gif_pic_center]: https://img-blog.csdnimg.cn/eab5f06593374449b6278c8f98892751.gif#pic_center
[919dfac19f9442ccbf0e499ebb2b57d3.png]: https://img-blog.csdnimg.cn/919dfac19f9442ccbf0e499ebb2b57d3.png