天天看点

vue-按键修饰符

用vue写PC端时,难免会涉及到按键,比如,按回车键提交表单等等,

以下代码可直接懂,关键点是, keyup 事件

<template>

    <div>

        <h2>键值修饰符</h2>

        <!-- 键值修饰简单使用,按回车触发事件 -->

        <button v-on:keyup.13="setKey">回车触发</button>

        <!-- 使用别名,回车键的别名 -->

        <input type="text" @keyup.enter="setKeys">

        <!-- 

            .enter (回车键)

            .tab (Tab键)

            .delete (捕获 “删除” 和 “退格” 键)

            .esc 

            .space

            .up

            .down

            .left

            .right

         -->

         <!-- 

             可以通过全局 config.keyCodes 对象自定义键值修饰符别名:

             // 可以使用 v-on:keyup.f1

            Vue.config.keyCodes.f1 = 112

          -->

    </div>    

</template>

<script>

    export default {

        data () {

            return {

            }

        },

        methods: {

            setKey () {

                console.log('按回车触发了事件')

            },

            setKeys () {

                console.log('回车键的别名')

            }

        }

    }

</script>