无法将@keyup侦听器添加到布局组件

时间:2018-12-31 12:08:38

标签: vue.js vuejs2 nuxt.js keyup

所以我在nuxt架构中有外部default.vue布局。我正在尝试将@keyup.esc="test"添加到default.vue的外部元素:

<template>
    <div @keyup.esc="test">
        <navigation></navigation>
        <nuxt/>
        <transition name="fade">
            <overlay-modals v-if="showModalLogin || showModalRegister"></overlay-modals>
        </transition>
        <transition name="zoom">
            <div class="modal__outer" v-if="showModalRegister || showModalLogin">
                    <modal-login v-if="showModalLogin"></modal-login>
                    <modal-register v-if="showModalRegister"></modal-register>
            </div>
        </transition>
    </div>
</template>

methods: {
    test() {
        alert('come on...');
    },

永远不会触发测试方法,这让我感到困惑。

2 个答案:

答案 0 :(得分:1)

如果您查看documentation,将会看到输入中使用了@keyup。在您的情况下-您正在使用它进行div操作,并且没有重点关注,因此无法进行键入。但是,您需要添加一些东西才能使其正常工作。请阅读this

答案 1 :(得分:1)

只有div具有焦点时,div才会检测到keyup事件,因此必须设置window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if (event.origin !== "http://example.org:8080") return; // ... } 使其具有焦点,并且必须使其具有焦点。

import Control.Monad.Identity
import Control.Monad.Error
import Control.Monad.Reader
import Control.Monad.State
import Control.Monad.Writer
import Control.Monad.Fail
import Data.Maybe
import qualified Data.Map as Map

type Name = String -- variable names
data Exp = Lit Integer -- expressions
         | Var Name
         | Plus Exp Exp
         | Abs Name Exp
         | App Exp Exp
         deriving (Show )

data Value = IntVal Integer -- values
           | FunVal Env Name Exp
           deriving (Show )
type Env = Map.Map Name Value -- mapping from names to values

type Eval3 α = ReaderT Env (ErrorT String Identity) α

runEval3 :: Env -> Eval3 α -> Either String α
runEval3 env ev = runIdentity (runErrorT (runReaderT ev env ))


evel3 :: Exp -> Eval3 Value
evel3 (Lit i)= return $ IntVal i
eval3 (Var n) = do env <- ask
                   case Map.lookup n env of
                     Nothing -> throwError ("unbound variable: " ++ n)
                     Just val -> return val
eval3 (Plus e1 e2 ) = do e1' <- eval3 e1
                         e2' <- eval3 e2
                         case (e1' , e2') of
                            (IntVal i1 , IntVal i2 ) -> return $ IntVal (i1 + i2 )
                            _ ->throwError "type error in addition"
eval3 (Abs n e) = do env <- ask
                     return $ FunVal env n e
eval3 (App e1 e2 ) = do val1 <- eval3 e1
                        val2 <- eval3 e2
                        case val1 of
                          FunVal env' n body -> local (const (Map.insert n val2 env')) (eval3 body)
                          _ -> throwError "type error in application"
tabindex