vue-color-ui 0.0.36 → 0.0.38

package/README.md

@@ -575,3 +575,144 @@ import TTopBar from './components/TTopBar.vue';
 import TTopBar from './components/TTopBar.vue';
 </script>
 ```
+
+## TVirtualScrollSlide 组件使用文档
+
+`TVirtualScrollSlide` 是一个用于显示虚拟滚动滑动列表的 Vue 组件，支持触摸滑动事件处理和动态加载内容。
+
+### 基本用法
+
+```vue
+<template>
+  <TVirtualScrollSlide
+    :virtualTotal="3"
+    :list="elements"
+    :render="renderItem"
+    @slideLeft="handleSlideLeft"
+    @slideRight="handleSlideRight"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, h } from "vue";
+import TVirtualScrollSlide from "@/components/TVirtualScrollSlide.vue";
+import TNavCard from "@/components/TNavCard.vue";
+
+const elements = ref([
+  { title: "布局", name: "layout", color: "cyan", cuIcon: "newsfill" },
+  { title: "背景", name: "background", color: "blue", cuIcon: "colorlens" },
+  { title: "文本", name: "text", color: "purple", cuIcon: "font" },
+  { title: "图标", name: "icon", color: "mauve", cuIcon: "cuIcon" },
+  { title: "按钮", name: "button", color: "pink", cuIcon: "btn" },
+  { title: "标签", name: "tag", color: "brown", cuIcon: "tagfill" },
+  { title: "头像", name: "avatar", color: "red", cuIcon: "myfill" },
+  { title: "进度条", name: "progress", color: "orange", cuIcon: "icloading" },
+  { title: "边框阴影", name: "shadow", color: "olive", cuIcon: "copy" },
+  { title: "加载", name: "loading", color: "green", cuIcon: "loading2" },
+]);
+
+const renderItem = (item: any, index: number) => {
+  return h(TNavCard, { items: [item] });
+};
+
+const handleSlideLeft = (item: any, index: any) => {
+  console.log("Slide Left:", item, index);
+};
+
+const handleSlideRight = (item: any, index: any) => {
+  console.log("Slide Right:", item, index);
+};
+</script>
+```
+
+### 属性
+
+`TVirtualScrollSlide` 组件支持以下属性：
+
+| 属性名         | 类型                                | 默认值 | 描述               |
+| -------------- | ----------------------------------- | ------ | ------------------ |
+| `virtualTotal` | `number`                            | -      | 虚拟显示的总数量   |
+| `render`       | `(item: any, index: number) => any` | -      | 渲染每个项目的函数 |
+| `list`         | `any[]`                             | -      | 数据列表           |
+
+### 事件
+
+`TVirtualScrollSlide` 组件支持以下事件：
+
+| 事件名       | 描述                                                        |
+| ------------ | ----------------------------------------------------------- |
+| `slideLeft`  | 当向左滑动时触发，回调参数为 `{ item: any, index: number }` |
+| `slideRight` | 当向右滑动时触发，回调参数为 `{ item: any, index: number }` |
+
+### 示例
+
+#### 基本使用
+
+```vue
+<template>
+  <TVirtualScrollSlide
+    :virtualTotal="3"
+    :list="elements"
+    :render="renderItem"
+    @slideLeft="handleSlideLeft"
+    @slideRight="handleSlideRight"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, h } from "vue";
+import TVirtualScrollSlide from "@/components/TVirtualScrollSlide.vue";
+import TNavCard from "@/components/TNavCard.vue";
+
+const elements = ref([
+  { title: "布局", name: "layout", color: "cyan", cuIcon: "newsfill" },
+  { title: "背景", name: "background", color: "blue", cuIcon: "colorlens" },
+  { title: "文本", name: "text", color: "purple", cuIcon: "font" },
+  { title: "图标", name: "icon", color: "mauve", cuIcon: "cuIcon" },
+  { title: "按钮", name: "button", color: "pink", cuIcon: "btn" },
+  { title: "标签", name: "tag", color: "brown", cuIcon: "tagfill" },
+  { title: "头像", name: "avatar", color: "red", cuIcon: "myfill" },
+  { title: "进度条", name: "progress", color: "orange", cuIcon: "icloading" },
+  { title: "边框阴影", name: "shadow", color: "olive", cuIcon: "copy" },
+  { title: "加载", name: "loading", color: "green", cuIcon: "loading2" },
+]);
+
+const renderItem = (item: any, index: number) => {
+  return h(TNavCard, { items: [item] });
+};
+
+const handleSlideLeft = (item: any, index: any) => {
+  console.log("Slide Left:", item, index);
+};
+
+const handleSlideRight = (item: any, index: any) => {
+  console.log("Slide Right:", item, index);
+};
+</script>
+```
+
+### 触摸滑动事件
+
+组件支持触摸滑动事件处理：
+
+- 向左滑动触发 `slideLeft` 事件
+- 向右滑动触发 `slideRight` 事件
+- 向上滑动加载下一项
+- 向下滑动加载上一项
+
+### 自定义渲染
+
+通过 `render` 属性，可以自定义每个项目的渲染方式：
+
+```vue
+<script setup lang="ts">
+import { h } from "vue";
+import TNavCard from "@/components/TNavCard.vue";
+
+const renderItem = (item: any, index: number) => {
+  return h(TNavCard, { items: [item] });
+};
+</script>
+```
+
+以上就是 `TVirtualScrollSlide` 组件的使用文档，详细介绍了组件的基本用法、属性、事件和示例。希望对您使用该组件有所帮助。

package/lib/style.css

@@ -1 +1 @@
-.nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-size:cover;background-position:center;position:relative;z-index:1;cursor:pointer}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.string-list[data-v-c7a21a1c]{width:100%;display:block;list-style:none;background-color:#fff;padding:2px 5px;margin:0;box-shadow:0 4px 8px #0000001a}.string-list li[data-v-c7a21a1c]{line-height:1.5rem;padding:8px 12px;border-bottom:1px solid #eee;transition:background-color .3s,color .3s}.string-list li[data-v-c7a21a1c]:last-child{border-bottom:none}.string-list li[data-v-c7a21a1c]:hover{background-color:#f0f0f0;color:#333;cursor:pointer;border-radius:4px}.emoji-panel[data-v-e9a4aa4d]{background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000;height:280px;overflow-y:auto}.emoji-panel span[data-v-e9a4aa4d]{cursor:pointer;font-size:24px;margin:5px}.function-panel-container[data-v-1fefca20]{background-color:#fff;box-sizing:border-box;width:100vw;border-top:1px solid #66666631}.function-panel[data-v-1fefca20]{display:flex;flex-wrap:wrap;background-color:#fff;padding:10px;z-index:1000;max-width:360px;gap:18px;margin:0 auto}.function-item[data-v-1fefca20]{display:flex;flex-direction:column;align-items:center;margin:10px 0;cursor:pointer;width:70px;height:70px;background-color:#f9f9f9;border-radius:10px;justify-content:center;transition:background-color .3s}.function-item[data-v-1fefca20]:hover{background-color:#e6e6e6}.function-item span[data-v-1fefca20]{margin-top:5px;font-size:14px;color:#333;text-align:center}input[data-v-7b4ca731]:focus{outline:none}.tab-content{padding:10px 16px;background:#fff}canvas[data-v-022c82bd]{margin:0 auto}
+.nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-size:cover;background-position:center;position:relative;z-index:1;cursor:pointer}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.string-list[data-v-c7a21a1c]{width:100%;display:block;list-style:none;background-color:#fff;padding:2px 5px;margin:0;box-shadow:0 4px 8px #0000001a}.string-list li[data-v-c7a21a1c]{line-height:1.5rem;padding:8px 12px;border-bottom:1px solid #eee;transition:background-color .3s,color .3s}.string-list li[data-v-c7a21a1c]:last-child{border-bottom:none}.string-list li[data-v-c7a21a1c]:hover{background-color:#f0f0f0;color:#333;cursor:pointer;border-radius:4px}.emoji-panel[data-v-e9a4aa4d]{background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000;height:280px;overflow-y:auto}.emoji-panel span[data-v-e9a4aa4d]{cursor:pointer;font-size:24px;margin:5px}.function-panel-container[data-v-1fefca20]{background-color:#fff;box-sizing:border-box;width:100vw;border-top:1px solid #66666631}.function-panel[data-v-1fefca20]{display:flex;flex-wrap:wrap;background-color:#fff;padding:10px;z-index:1000;max-width:360px;gap:18px;margin:0 auto}.function-item[data-v-1fefca20]{display:flex;flex-direction:column;align-items:center;margin:10px 0;cursor:pointer;width:70px;height:70px;background-color:#f9f9f9;border-radius:10px;justify-content:center;transition:background-color .3s}.function-item[data-v-1fefca20]:hover{background-color:#e6e6e6}.function-item span[data-v-1fefca20]{margin-top:5px;font-size:14px;color:#333;text-align:center}input[data-v-7b4ca731]:focus{outline:none}.tab-content{padding:10px 16px;background:#fff}canvas[data-v-022c82bd]{margin:0 auto}.slide-wrapper[data-v-8600af8d]{overflow:hidden;position:relative;width:100vw;height:100vh}.slide-list[data-v-8600af8d]{position:absolute;width:100%;transition:transform .3s ease}.slide-item[data-v-8600af8d]{position:absolute;width:100%}