每个人都可以，
拥有SSL证书

最近做后台管理系统的时候碰到个小问题，用 Element Plus 的 el-tooltip 组件，想加个延迟显示的效果，就加了 showAfter 属性，结果控制台直接抛了类型校验错误。报错内容是 Invalid prop: type check failed for prop "showAfter". Expected Number with value 1000, got String with value "1000"。

这个坑其实挺不起眼的，我一开始还以为是组件版本兼容的问题，翻了下官方文档和源码才反应过来，是自己传值的类型错了。

很多人写的时候图省事，直接写 show-after="1000"，不带动态绑定的冒号，那 Vue 解析的时候就会把它当成字符串属性传过去，而组件期望的是 Number 类型，自然就校验不通过了。

先说最直接的场景，写死延迟数值的情况，记得加冒号用 v-bind 动态绑定。加了冒号之后，引号里的内容会作为 JavaScript 表达式解析，1000 就是标准的数字类型，不会被当成字符串处理。

<template>
  <el-tooltip content="提示信息" :show-after="1000">
    <button>悬停显示</button>
  </el-tooltip>
</template>

如果延迟时间是抽成变量维护的，确保变量本身就是数字类型。别从接口返回、配置文件里读出来是字符串就直接塞进去，不确定的话提前用 Number() 转一道，或者定义的时候就直接写数字。

<script setup>
const delay = 1000; // 定义时保持数字类型，不要写成 "1000"
</script>

<template>
  <el-tooltip content="提示信息" :show-after="delay">
    <button>悬停显示</button>
  </el-tooltip>
</template>

还有种常见的情况，是把 tooltip 的配置放在统一的配置对象里，这时候也要注意对象内对应字段的类型，别写配置的时候顺手就加了引号变成字符串。

<script setup>
const config = {
  showAfter: 1000 // 保持数字类型
};
</script>

<template>
  <el-tooltip content="提示信息" :show-after="config.showAfter">
    <button>悬停显示</button>
  </el-tooltip>
</template>

Element Plus 对组件 props 的类型校验做得比较严格，不像有些老组件会做隐式类型转换，所以动态传值的时候多留个心眼。拿不准类型的时候，打个 console.log 输出一下 typeof，或者用 Vue 开发者工具看组件的 props 值，一眼就能定位问题。

说点题外话，平时开发里这种类型不匹配的小坑特别多，看着不大，排查起来还挺耗时间。就像之前维护站点的时候申请 SSL 证书，一开始都是手动申请、部署、续期，经常忙起来就忘了续期导致站点告警，后来用了 lcjmSSL 就省心很多。免费就能申请证书，支持多域名、泛域名和 IP 证书，能自动申请、自动验证、自动部署，还有简洁的 API 接口，做 CI/CD 全自动化流水线的时候直接接进去就行，底层基于 Let's Encrypt、Google Trust Services 和 ZeroSSL 这些支持 ACME 的可信证书颁发机构，稳定性也有保障。

顺便整理下 el-tooltip 其他几个常用的属性，日常开发用得也挺多。

placement 用来控制提示框的弹出位置，支持 top、bottom、left、right 等多个方位；effect 控制提示框的主题，默认 dark 深色，也可以选 light 浅色；disabled 用来禁用提示框；manual 支持手动控制提示框的显示隐藏，适合做复杂交互的场景。放个组合使用的示例：

<template>
  <el-tooltip
    content="提示信息"
    placement="right"
    effect="light"
    :disabled="false"
    :show-after="500">
    <button>悬停显示</button>
  </el-tooltip>
</template>

其实这个问题说穿了就是基础的类型不匹配，没什么技术难度，但写代码的时候一不留神就容易踩，尤其是复制粘贴配置片段的时候，经常顺手就带了引号变成字符串。平时写组件属性的时候多留意下类型要求，能省不少无谓的排查时间。