zx-infinite-scroll 1.0.3 → 1.0.6

package/README.md

@@ -20,97 +20,43 @@ npm install zx-infinite-scroll
 
 ## 快速开始
 
-### ⭐ 推荐：全局引入样式（最简单）
+### ✨ 样式自动注入
 
-在 `main.ts` 中全局引入样式**一次**即可：
-
-```ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'zx-infinite-scroll/dist/style.css'; // 👈 只需引入一次
-
-const app = createApp(App);
-app.mount('#app');
-```
-
-之后在任何组件中使用都**不需要**再引入样式：
+**无需手动引入样式！** 只要导入组件，样式会自动注入到页面中。
 
 ```vue
 <script setup>
 import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-// ✅ 不需要再引入样式
+// ✅ 样式已自动注入，无需手动 import 'xxx/style.css'
+
+const fetchData = async ({ page, pageSize }) => {
+  // 你的请求逻辑
+  return { records: [], total: 0 };
+};
 </script>
 
 <template>
   <InfiniteScrollV2 :fetch-fn="fetchData">
-    <!-- ... -->
+    <template #default="{ list }">
+      <div v-for="item in list" :key="item.id">
+        {{ item.name }}
+      </div>
+    </template>
   </InfiniteScrollV2>
 </template>
 ```
 
----
-
-### 方式一：手动引入样式（每次使用都要引入）
-
-如果不想全局引入，每次使用时手动引入：
-
-```vue
-<script setup>
-import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css'; // 👈 每次都要引入
-</script>
-```
-
----
-
-### 方式二：使用 unplugin-vue-components 自动导入（高级）
-
-安装插件：
-
-```bash
-npm install -D unplugin-vue-components
-```
-
-配置 `vite.config.ts`：
-
-```ts
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import Components from 'unplugin-vue-components/vite';
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [
-        // 自定义解析器
-        (componentName) => {
-          if (componentName.startsWith('InfiniteScroll')) {
-            return {
-              name: componentName,
-              from: 'zx-infinite-scroll',
-              sideEffects: 'zx-infinite-scroll/dist/style.css'
-            };
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-这样组件和样式都会自动按需导入，无需手动 import！
-
 
 
 ## 使用
 
+> 💡 **提示**：样式已自动注入，无需手动引入 CSS 文件！
+
 ### 方式一：按需引入
 
 ```vue
 <script setup lang="ts">
 import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 interface Item {
   id: number;
@@ -147,7 +93,6 @@ const fetchData = async ({ page, pageSize }) => {
 ```ts
 import { createApp } from 'vue';
 import InfiniteScrollPlugin from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 import App from './App.vue';
 
 const app = createApp(App);
@@ -255,7 +200,6 @@ interface FetchResult<T> {
 <script setup lang="ts">
 import { ref } from 'vue';
 import { InfiniteScroll } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 const list = ref([]);
 const loading = ref(false);
@@ -338,7 +282,6 @@ const onRefresh = async () => {
 ```vue
 <script setup lang="ts">
 import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 interface Item {
   id: number;
@@ -372,7 +315,6 @@ const fetchData = async ({ page, pageSize }) => {
 <script setup lang="ts">
 import { ref } from 'vue';
 import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 const keyword = ref('');
 const category = ref('');
@@ -414,7 +356,6 @@ const fetchData = async ({ page, pageSize, keyword, category }) => {
 ```vue
 <script setup lang="ts">
 import { InfiniteScrollV2 } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 const handleSuccess = ({ records, total, reset }) => {
   console.log('加载成功', { records, total, reset });
@@ -453,7 +394,6 @@ const fetchData = async ({ page, pageSize }) => {
 <script setup lang="ts">
 import { ref } from 'vue';
 import { InfiniteScroll } from 'zx-infinite-scroll';
-import 'zx-infinite-scroll/dist/style.css';
 
 const scrollRef = ref();
 const list = ref([]);