feat: 支持幻灯片数据源 (#275)

* feat: 支持幻灯片数据源
vusion · Mar 19, 2024 · 52ce876 · 52ce876
1 parent 359430d
commit 52ce876
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 17 deletions.
diff --git a/src/swipe/api.ts b/src/swipe/api.ts
@@ -7,12 +7,27 @@ namespace nasl.ui {
     description: '用于循环播放一组图片或内容',
     group: "Display"
   })
-  export class VanSwipe extends ViewComponent {
-    constructor(options?: Partial<VanSwipeOptions>) {
+  export class VanSwipe<T> extends ViewComponent {
+    constructor(options?: Partial<VanSwipeOptions<T>>) {
       super();
     }
   }
-  export class VanSwipeOptions extends ViewComponentOptions {
+  export class VanSwipeOptions<T> extends ViewComponentOptions {
+    @Prop({
+      group: '数据属性',
+      title: '数据源',
+      description: '展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑。',
+      designerValue: [{}, {}, {}]
+    })
+    dataSource: nasl.collection.List<T> | { total: nasl.core.Integer; list: nasl.collection.List<T> };
+
+    @Prop({
+      group: '数据属性',
+      title: '数据类型',
+      description: '集合类型每一元素的数据类型'
+    })
+    dataSchema: T;
+
     @Prop({
       title: '循环播放',
       description: '是否循环播放',
@@ -50,13 +65,18 @@ namespace nasl.ui {
     @Slot({
       title: 'undefined',
       description: '插入`van-swipe-item`子组件。',
-      emptyBackground: 'add-sub-large',
+      // emptyBackground: 'add-sub-large',
       snippets: [{
         title: '幻灯片子项',
         code: '<van-swipe-item vusion-slot-name="default"><van-image style="width:100%;height:100%" src="https://static-vusion.163yun.com/assets/cloud-ui/1.jpg"></van-image></van-swipe-item>'
       }]
     })
     slotDefault: () => Array<VanSwipeItem>;
+    @Slot({
+      title: 'undefined',
+      description: '自定义选项的结构和样式'
+    })
+    slotItem: (current: Current<T>) => Array<ViewComponent>;
   }
   @Component({
     title: '幻灯片选项',
@@ -89,7 +109,7 @@ namespace nasl.ui {
       screenX: nasl.core.Integer;
       screenY: nasl.core.Integer;
       which: nasl.core.Integer;
-  }) => any ;
+    }) => any;
     @Slot({
       title: 'undefined',
       description: '插入幻灯片内容，如图片'

diff --git a/src/swipe/docs/blocks.md b/src/swipe/docs/blocks.md
@@ -6,5 +6,18 @@
   <van-swipe-item vusion-slot-name="default"><van-image style="width:100%;height:100%" src="https://static-vusion.163yun.com/assets/cloud-ui/2.jpg"></van-image></van-swipe-item>
   <van-swipe-item vusion-slot-name="default"><van-image style="width:100%;height:100%" src="https://static-vusion.163yun.com/assets/cloud-ui/3.jpg"></van-image></van-swipe-item>
   <van-swipe-item vusion-slot-name="default"><van-image style="width:100%;height:100%" src="https://static-vusion.163yun.com/assets/cloud-ui/4.jpg"></van-image></van-swipe-item>
+
+  <template #item="current">
+    <van-swipe-item
+      vusion-disabled-cut
+      vusion-disabled-copy
+      vusion-slot-name="default"
+    >
+      <van-image
+        style="width:100%;height:100%"
+        src="https://static-vusion.163yun.com/assets/cloud-ui/4.jpg">
+      </van-image>
+    </van-swipe-item>
+  </template>
 </van-swipe>
 ```
diff --git a/src/swipe/index.js b/src/swipe/index.js
@@ -9,11 +9,13 @@ import { range } from '../utils/format/number';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
+import DataSourceMixin from '../mixins/DataSource';
 
 const [createComponent, bem] = createNamespace('swipe');
 
 export default createComponent({
   mixins: [
+    DataSourceMixin,
     TouchMixin,
     ParentMixin('vanSwipe'),
     BindEventMixin(function (bind, isBind) {
@@ -385,8 +387,8 @@ export default createComponent({
     },
 
     autoPlay() {
-      if (this.$env && this.$env.VUE_APP_DESIGNER) {
-        return
+      if (this.inDesigner()) {
+        return;
       }
       const { autoplay } = this;
 
@@ -402,24 +404,25 @@ export default createComponent({
       this.swipeTo(index);
     },
     genIndicator() {
-      const designer = this.$env && this.$env.VUE_APP_DESIGNER;
       const { count, activeIndicator } = this;
       const slot = this.slots('indicator');
       const _this = this;
       if (slot) {
         return slot;
       }
-      const _scopeId = this.$vnode.context.$options._scopeId;
+
       if (this.showIndicators && count > 1) {
-        if (designer) {
+        if (this.inDesigner()) {
           return (
             <div class={bem('indicators', { vertical: this.vertical })}>
               {Array(...Array(count)).map((empty, index) => (
                 <i
                   vusion-click-enabled
                   can-nodeinfo
                   index={index}
-                  class={bem('indicator', { active: index === activeIndicator })}
+                  class={bem('indicator', {
+                    active: index === activeIndicator,
+                  })}
                   style={index === activeIndicator ? this.indicatorStyle : null}
                   onClick={() => _this.clickIndicator(index)}
                 />
@@ -441,24 +444,38 @@ export default createComponent({
         );
       }
     },
+
+    renderDataSource() {
+      return this.currentData?.map((item, index) => {
+        return this.slots('item', { item, index });
+      });
+    },
+
+    renderNormal() {
+      return this.slots();
+    },
   },
 
   render() {
-    const designer = this.$env && this.$env.VUE_APP_DESIGNER;
     return (
       <div class={bem()}>
         <div
           ref="track"
           style={this.trackStyle}
           class={bem('track', { vertical: this.vertical })}
         >
-          {this.slots()}
+          {this.dataSource !== undefined
+            ? this.renderDataSource()
+            : this.renderNormal()}
         </div>
+        {!this.slots() &&
+          this.dataSource === undefined &&
+          this.inDesigner() && (
+            <div style="text-align: center; width:100%; position: absolute; top: 50%;">
+              请绑定数据源或插入子节点
+            </div>
+          )}
         {this.genIndicator()}
-        {/* {designer ? <Icon name="arrow" class={bem('iconarrow', { right: true })} onClick={this.next} vusion-index="0"
-            findname="realpostionicon"></Icon> : null}
-        {designer ? <Icon name="arrow-left" class={bem('iconarrow', { left: true })} onClick={this.prev} vusion-index="1"
-            findname="realpostionicon"></Icon> : null} */}
       </div>
     );
   },