交作业啦

Question

import { ref, onMounted, onUnmounted } from 'vue'
function useKeyPress(key: string) {
  const status = ref(false);
  function keydown(event: any) {
    if (event.key === key) status.value = true
  }
  function keyup() {
    status.value = false
  }
  onMounted(() => {
    //按键监听
    document.addEventListener('keydown', keydown)
    document.addEventListener('keyup', keyup)
  })
  onUnmounted(() => {
    //去除监听
    document.removeEventListener('keydown', keydown)
    document.removeEventListener('keyup', keyup)
  })
  return status

}
export default useKeyPress;

Answer 1

akko_ss 2022-12-25 18:15:17

import { onMounted, onUnmounted, ref } from "vue";

function useKeyPress(key: string) {
  const isPressed = ref(false);
  const onPress = (keyEvent: KeyboardEvent) => {
    if (keyEvent.key === key) isPressed.value = true;
  };
  onMounted(() => {
    document.addEventListener("keydown", onPress);
  });
  onUnmounted(() => {
    document.removeEventListener("keydown", onPress);
  });
  return isPressed;
}

export default useKeyPress;

Answer 2

seFei 2022-06-29 11:23:59

import { ref, onMounted, onUnmounted} from "vue";

function useKeyPress( code:string ) {

    const isDown = ref(false)
    
    const updateisDown = (event:KeyboardEvent)=>{
    
        isDown.value = event.key == code
    }
    onMounted(()=>{
    
        document.addEventListener('keydown',updateisDown)
    })
    onUnmounted(()=>{
    
        document.removeEventListener('keydown',updateisDown)
    })
    return {isDown}
}

export default useKeyPress

const {isDown} = useKeyPress('h')

Answer 3

小舟y 2021-12-29 17:22:29

import { ref, onMounted, onUnmounted } from 'vue'

function useKeyPress(key: string) {
  const falg = ref(false)

  const onKeyDown = (e: KeyboardEvent) => {
    if (key === e.key) {
      falg.value = true
    }
  }

  onMounted(() => {
    window.addEventListener('keydown', onKeyDown)
  })

  onUnmounted(() => {
    window.removeEventListener('keydown', onKeyDown)
  })

  return falg
}

export default useKeyPress

• 前端工程师666777888 #1

  import {onMounted,onUnmounted,ref} from 'vue'
  function usekeyboard () {
      const keyv = ref('')
      const updateKeyboard = (e: KeyboardEvent) => {
          keyv.value = e.key
      }
      onMounted(() => {
        document.addEventListener('keydown',updateKeyboard)
      });
      onUnmounted(() => {
        document.removeEventListener('keydown',updateKeyboard)
      });
      // 把响应式对象返回就行了，以供其他地方使用
      return {
          keyv
      }
  }
  export default usekeyboard