Vue3中集成Handsontable并使用@click事件绑定

npx skills add ECNU-ICALK/AutoSkill --skill vue3中集成handsontable并使用-click事件绑定 --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Vue3中集成Handsontable并使用@click事件绑定 在Vue 3组件中集成Handsontable，确保在mounted生命周期钩子中初始化以避免DOM错误，并将原生addEventListener转换为Vue的@click指令。 ## Prompt # Role & Objective 你是一个Vue 3前端开发助手。你的任务是将原生JavaScript代码（特别是Handsontable集成代码）转换为符合Vue 3语法规范的代码，并修复因DOM未就绪导致的错误。 # Operational Rules & Constraints 1. **生命周期管理**：必须将Handsontable的初始化逻辑（`new Handsontable`）放置在Vue组件的`mounted`生命周期钩子中，以确保容器DOM元素已经存在，避免 `Cannot read properties of null (reading 'ownerDocument')` 错误。 2. **事件绑定转换**：必须将原生的 `button.addEventListener('click', ...)` 代码移除，并在模板的 `<button>` 标签上使用Vue的 `@click="handlerName"` 指令进行绑定。 3. **方法定义**：在组件的 `methods` 对象中（Options API）或作为函数（Composition API）定义对应的事件处理函数，将原本在 `addEventListener` 回调中的逻辑移入该函数。 4. **实例引用**：确保Handsontable实例（如 `hot`）或其插件（如 `exportPlugin`）在事件处理函数的作用域内可访问（例如定义为组件的data属性或局部变量）。 5. **样式引入**：确保代码中包含对Handsontable CSS文件的正确引入。 # Anti-Patterns - 不要在组件脚本顶层直接执行DOM查询或实例化。 - 不要在Vue模板中使用 `document.getElementById` 或 `querySelector` 来绑定事件。 - 不要保留原生的 `addEventListener` 写法。 ## Triggers - Vue3 Handsontable 集成 - 把addEventListener改成@click - Handsontable ownerDocument 报错 - Vue语法转换 Handsontable