zxt-table 0.3.1 → 0.3.2

package/README.md

@@ -28,7 +28,33 @@ npm install zxt-table
 
 ## 使用
 
-### 全局注册
+### 方式一：自动按需引入（推荐）
+
+如果您使用了 `unplugin-vue-components` 和 `unplugin-auto-import`，可以使用我们提供的 Resolver 自动引入组件和样式（包括 Element Plus 的样式）。
+
+1. 在 `vite.config.js` 中配置：
+
+```javascript
+import { defineConfig } from 'vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ZxtTableResolver } from 'zxt-table/resolver' // 引入 Resolver
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [
+        // Element Plus 自动引入
+        ElementPlusResolver(),
+        // ZxtTable 自动引入 (会自动处理 ZxtTable 和 Element Plus 的样式依赖)
+        ZxtTableResolver()
+      ],
+    }),
+  ],
+})
+```
+
+### 方式二：全局注册
 
 在您的 `main.js` 文件中引入组件库：
 
@@ -36,11 +62,13 @@ npm install zxt-table
 import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
+// ❗ 重要：如果您没有使用 Resolver，必须手动引入 Element Plus 样式
 import 'element-plus/dist/index.css'
 
 // 引入 zxt-table
 import ZxtTable from 'zxt-table'
-import 'zxt-table/dist/style.css'
+// 引入组件库样式
+import 'zxt-table/style.css'
 
 const app = createApp(App)
 app.use(ElementPlus)
@@ -48,7 +76,7 @@ app.use(ZxtTable)
 app.mount('#app')
 ```
 
-### 按需引入
+### 方式三：手动按需引入
 
 您也可以按需引入单个组件：
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zxt-table",
   "private": false,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "一个基于 Vue 3 和 Element Plus 的高级表格、表单组件库",
   "keywords": [
@@ -26,17 +26,14 @@
       "require": "./dist/zxt-table.umd.js"
     },
     "./style.css": "./dist/zxt-table.css",
-    "./dist/style.css": "./dist/zxt-table.css"
+    "./dist/style.css": "./dist/zxt-table.css",
+    "./resolver": "./resolver.js"
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "resolver.js"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
   "peerDependencies": {
     "element-plus": "^2.0.0",
     "vue": "^3.2.0"
@@ -55,5 +52,10 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
-}
+}

package/resolver.js

@@ -0,0 +1,35 @@
+/**
+ * ZxtTable Resolver for unplugin-vue-components
+ *
+ * 使用方法 (vite.config.js):
+ * import { ZxtTableResolver } from 'zxt-table/resolver'
+ *
+ * Components({
+ *   resolvers: [
+ *     ZxtTableResolver()
+ *   ]
+ * })
+ */
+function ZxtTableResolver(options = {}) {
+  return {
+    type: "component",
+    resolve: (name) => {
+      // 匹配以 Zxt 开头的组件 (ZxtTable, ZxtGrid, ZxtForm, ZxtPagination 等)
+      if (name.startsWith("Zxt")) {
+        return {
+          name: name,
+          from: "zxt-table",
+          sideEffects: [
+            // 自动引入 ZxtTable 样式
+            "zxt-table/style.css",
+            // 自动引入 Element Plus 全量样式 (解决样式丢失问题)
+            // 如果用户明确配置了 importStyle: false，则不自动引入 Element 样式
+            options.importStyle !== false ? "element-plus/dist/index.css" : "",
+          ].filter(Boolean),
+        };
+      }
+    },
+  };
+}
+
+module.exports = { ZxtTableResolver };