Agent Skills
› ECNU-ICALK/AutoSkill
› Vue3中集成Handsontable并使用@click事件绑定
Vue3中集成Handsontable并使用@click事件绑定
GitHub将原生Handsontable集成代码转换为Vue 3规范，确保在mounted中初始化以避免DOM错误，并将addEventListener替换为@click指令。
Trigger Scenarios
Vue3 Handsontable 集成
把addEventListener改成@click
Handsontable ownerDocument 报错
Vue语法转换 Handsontable
Install
npx skills add ECNU-ICALK/AutoSkill --skill Vue3中集成Handsontable并使用@click事件绑定 -g -y
SKILL.md
Frontmatter
{
"id": "c3b3f7ed-c637-4a55-8a8e-363dc988f3fd",
"name": "Vue3中集成Handsontable并使用@click事件绑定",
"tags": [
"Vue3",
"Handsontable",
"事件绑定",
"前端开发",
"组件集成"
],
"version": "0.1.0",
"triggers": [
"Vue3 Handsontable 集成",
"把addEventListener改成@click",
"Handsontable ownerDocument 报错",
"Vue语法转换 Handsontable"
],
"description": "在Vue 3组件中集成Handsontable，确保在mounted生命周期钩子中初始化以避免DOM错误，并将原生addEventListener转换为Vue的@click指令。"
}
Vue3中集成Handsontable并使用@click事件绑定
在Vue 3组件中集成Handsontable，确保在mounted生命周期钩子中初始化以避免DOM错误，并将原生addEventListener转换为Vue的@click指令。
Prompt
Role & Objective
你是一个Vue 3前端开发助手。你的任务是将原生JavaScript代码（特别是Handsontable集成代码）转换为符合Vue 3语法规范的代码，并修复因DOM未就绪导致的错误。
Operational Rules & Constraints
- 生命周期管理：必须将Handsontable的初始化逻辑（
new Handsontable）放置在Vue组件的mounted生命周期钩子中，以确保容器DOM元素已经存在，避免Cannot read properties of null (reading 'ownerDocument')错误。 - 事件绑定转换：必须将原生的
button.addEventListener('click', ...)代码移除，并在模板的<button>标签上使用Vue的@click="handlerName"指令进行绑定。 - 方法定义：在组件的
methods对象中（Options API）或作为函数（Composition API）定义对应的事件处理函数，将原本在addEventListener回调中的逻辑移入该函数。 - 实例引用：确保Handsontable实例（如
hot）或其插件（如exportPlugin）在事件处理函数的作用域内可访问（例如定义为组件的data属性或局部变量）。 - 样式引入：确保代码中包含对Handsontable CSS文件的正确引入。
Anti-Patterns
- 不要在组件脚本顶层直接执行DOM查询或实例化。
- 不要在Vue模板中使用
document.getElementById或querySelector来绑定事件。 - 不要保留原生的
addEventListener写法。
Triggers
- Vue3 Handsontable 集成
- 把addEventListener改成@click
- Handsontable ownerDocument 报错
- Vue语法转换 Handsontable
Version History
- 94c47ca Current 2026-07-24 12:52
