交作业啦

Question

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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