满口金牙 2022-05-30 21:11 采纳率: 91.5%
浏览 890
已结题

请教Vue3 @click 等事件 参数的 TS 类型正确写法

下面函数 参数 的类型,因为不知道写,所以都写的any, 请教要怎么写,我写 Event 也不行
obj: Event 没用,
obj:HTMLElement 也不行. 报错没有 target属性

请教 any 以外的正确写法


  function menuSelect(obj:any,index?:number){ // 菜单选择 @click
    if (/theme/.test(obj.target.__vnode.props.key)) {
      window.document.documentElement.setAttribute("data-theme", obj.target.__vnode.props.key) // 把主题名给docment
      ConfigProvider.config( // 按官方文档修改 primaryColor
        primaryColor[obj.target.__vnode.props.key] // 自定义变量
      )
    } else if (/[en|zh]/.test(obj.target.__vnode.props.key)) {
      i18n.global.locale = obj.target.__vnode.props.key
    }
      menuTopActive.value = '' // 关闭下拉菜单
  }
  function menuTopMouseEnter(obj: any){  // 菜单鼠标移入 @mouseenter
    menuTopActive.value = obj.target.__vnode.props.key  // 判断是自身吗,如果是就是显示
  }
  function menuTopMouseLeave(obj: any){ // 菜单鼠标移出 @mouseleave
    menuTopActive.value = '' // 关闭下拉菜单
  }
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-31 09:44
    关注

    指定为Event,然后转换下类型试试

    function menuTopMouseEnter(obj: Event){ // 菜单鼠标移入 @mouseenter
    menuTopActive.value = (obj.target as HTMLInputElement).__vnode.props.key // 判断是自身吗,如果是就是显示
    }

    下面为官网的说明

    为事件处理器添加类型
    在处理原生 DOM 事件的时候,正确地为处理函数的参数添加类型或许会是有用的。让我们看这个例子:

    
    <template>
      <input type="text" @change="handleChange" />
    </template>
    <script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
      setup() {
        // `evt` 将会是 `any` 类型
        const handleChange = evt => {
          console.log(evt.target.value) // 此处 TS 将抛出异常
        }
        return { handleChange }
      }
    })
    </script>
    
    

    如你所见,在没有为 evt 参数正确地声明类型的情况下,当我们尝试获取 元素的值时,TypeScript 将抛出异常。解决方案是将事件的目标转换为正确的类型:

    
    const handleChange = (evt: Event) => {
      console.log((evt.target as HTMLInputElement).value)
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月8日
  • 已采纳回答 5月31日
  • 创建了问题 5月30日

悬赏问题

  • ¥15 有人能看一下我宿舍管理系统的报修功能该怎么改啊?链表那里总是越界
  • ¥15 cs loadimage运行不了,easyx也下了,没有用
  • ¥15 r包runway详细安装教程
  • ¥15 Html中读取Json文件中数据并制作表格
  • ¥15 谁有RH342练习环境
  • ¥15 STM32F407 DMA中断问题
  • ¥15 uniapp连接阿里云无法发布消息和订阅
  • ¥25 麦当劳点餐系统代码纠错
  • ¥15 轮班监督委员会问题。
  • ¥20 关于变压器的具体案例分析