你是否還在手動給每一個可點擊元素添加 cursor: pointer？忘了加，用户體驗就大打折扣。

現在，只需安裝 ​ babel-plugin-pointe​，就能徹底解決這個問題！這是一個 Babel 插件，能夠自動、智能地為所有帶有點擊事件的元素注入正確的指針樣式。

💡 核心亮點：智能且非侵入式

1. 🤯 自動檢測，全框架支持

• ​Vue 3​：檢測 @click、v-on:click。
• ​React​：檢測 onClick 屬性。
• ​原生 JS​：檢測 addEventListener('click', ...)。

2. 🧠 智能檢測，永不覆蓋

插件使用 window.getComputedStyle() 智能檢測。它永遠不會覆蓋你已有的 cursor 樣式（無論是內聯樣式、CSS 類還是 CSS 文件定義）。

只有當元素沒有自定義樣式時，才設置 cursor: pointer。完美兼容、非侵入式！

3. 🚀 零運行時依賴

純編譯時轉換，運行時輔助函數極小（約 1KB），對打包大小和性能影響可以忽略不計。

📦 如何使用？

1. 安裝

npm install babel-plugin-pointer --save-dev
yarn add babel-plugin-pointer --dev
pnpm add babel-plugin-pointer -D

2. 配置

根據你的項目類型，在 Babel 配置中添加對應的插件.

Vue 3 項目

在 babel.config.js 中：

module.exports = {
  plugins: ['babel-plugin-pointer/vue'] // 注意使用 /vue
}

React 項目

在 babel.config.js 或 .babelrc 中：

module.exports = {
  plugins: ['babel-plugin-pointer/react'] // 注意使用 /react
}

📝 示例

Vue 3 輸入

代碼段

<template>
  <button @click="handleClick">點擊我</button>
  <div @click="handleClick" class="custom-cursor">自定義</div>
</template>
<style>.custom-cursor { cursor: help; }</style>

結果：

• 第一個 <button> 自動獲得 cursor: pointer ✅
• 第二個 <div> 保持 cursor: help（不被覆蓋）✅

React 輸入

JavaScript

function App() {
  return (
    <div onClick={handleClick} >點擊我</div>
    <div onClick={handleClick} style={{ cursor: 'help' }}>自定義</div>
  );
}

結果：

• 第一個 <div> 自動獲得 cursor: pointer ✅
• 第二個 <div> 保持 cursor: help（不被覆蓋）✅

🔗 項目地址

• GitHub:https://github.com/BitePro/babel-plugin-pointer （請替換為您的實際 GitHub 地址）
• NPM:babel-plugin-pointer