zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Vue3--系统修饰键

Vue3系统 -- 修饰
2023-06-13 09:12:41 时间

tips:

  • 可以使用ctrl,alt,shift,meta四种系统修饰键
  • meta在不同操作系统中代表的是不同的按键,Windows中是win键,Apple系统中是command键
  • .exact是用来修饰系统修饰键,表示精准控制
  • 系统修饰键可以与其他修饰键一起使用

example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="michael">
        <input @keydown.ctrl.exact="abc" /> <!--按下ctrl,shift,alt,meta都是同样的效果-->
    </div>
    <script>
        //ctrl,shift,alt,meta  系统修饰键,补充  exact表示精准控制
        Vue.createApp({
            "methods":{
                abc(){
                    alert(1)
                }
            }
        }).mount("#michael")
    </script>
</body>
</html>