zoukankan      html  css  js  c++  java
  • vue16 自定义键盘属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
        </style>
        <script src="vue.js"></script>
        <script>
            window.onload=function(){
                var vm=new Vue({
                    el:'#box',
                    data:{
                        a:'blue'
                    },
                    methods:{
                        show:function(){
                            alert(1);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="text" @keydown.c="show">
            <input type="text" @keydown.enter="show">
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
        </style>
        <script src="vue.js"></script>
        <script>
            //ctrl->17
            /*document.onkeydown=function(ev){
                console.log(ev.keyCode);
            };*/
            window.onload=function(){
                var vm=new Vue({
                    el:'#box',
                    data:{
                        a:'blue'
                    },
                    methods:{
                        show:function(){
                            alert(1);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="text" @keydown.17="show">
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
            //ctrl->17
            /*document.onkeydown=function(ev){
                console.log(ev.keyCode);
            };*/
            Vue.directive('on').keyCodes.ctrl=17;  //17起了别名叫ctrl
            Vue.directive('on').keyCodes.myenter=13;
    
            window.onload=function(){
                var vm=new Vue({
                    el:'#box',
                    data:{
                        a:'blue'
                    },
                    methods:{
                        show:function(){
                            alert(1);
                        }
                    }
                });
            };
    
        </script>
    </head>
    <body>
        <div id="box">
            <input type="text" @keydown.ctrl="show">
            <input type="text" @keydown.myenter="show">
            <input type="text" @keydown.myenter="show | debounce 2000">
        </div>
    
    </body>
    </html>
  • 相关阅读:
    NOIP2015 斗地主
    BZOJ 2120: 数颜色
    BZOJ 1014: [JSOI2008]火星人prefix
    BZOJ 4665: 小w的喜糖
    BZOJ 3665: maths
    BZOJ 3270: 博物馆
    BZOJ 1419: Red is good
    【转】二分图的最大匹配
    POJ 3026 Borg Maze(Prim+BFS建邻接矩阵)
    POJ 2485 Highway(Prim+邻接矩阵)
  • 原文地址:https://www.cnblogs.com/yaowen/p/6977685.html
Copyright © 2011-2022 走看看