重构 GuideTour (#1017)

* feat: 更新 GuideTour * feat: 更新 guide-tour 的 axml * feat: 更新 guide tour 的测试 * fix: 更新 axml * chore: 更新 guidetour 的 axml * fix: 修复 guide tour 的 axml * fix: 更新 guidetour 的 axml * fix: 更新 axml * fix: 更新 axml * fix: update axml * fix: 更新 axml * fix: 删除 disable-touch --------- Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
ant-design · Jan 17, 2024 · e9e9190 · e9e9190
1 parent e18023a
commit e9e9190
Show file tree

Hide file tree

Showing 23 changed files with 507 additions and 405 deletions.
diff --git a/compiled/alipay/demo/pages/GuideTour/index.axml b/compiled/alipay/demo/pages/GuideTour/index.axml
@@ -1,40 +1,41 @@
 <guide-tour
-  items="{{[list[0]]}}"
-  visible="{{baseVisible}}"
+  items="{{ [list[0]] }}"
+  visible="{{ baseVisible }}"
   onCancel="closeTour"
   onChange="onChange" />
 <guide-tour
-  items="{{list}}"
-  visible="{{moreVisible}}"
+  items="{{ list }}"
+  visible="{{ moreVisible }}"
   onCancel="closeTour"
   onChange="onChange" />
 <guide-tour
-  items="{{list}}"
-  visible="{{swiperVisible}}"
+  items="{{ list }}"
+  visible="{{ swiperVisible }}"
   onCancel="closeTour"
   onChange="onChange"
-  swiperable="{{true}}" />
+  swiperable="{{ true }}" />
 <guide-tour
-  items="{{list}}"
-  current="{{current}}"
-  visible="{{controlledVisible}}"
+  items="{{ list }}"
+  current="{{ current }}"
+  visible="{{ controlledVisible }}"
   onCancel="closeTour"
   onChange="onChangeControlled" />
 <guide-tour
-  items="{{list}}"
-  visible="{{slotVisible}}"
+  items="{{ list }}"
+  visible="{{ slotVisible }}"
   onCancel="closeTour"
   onChange="onChange">
   <view
     class="step-box"
     slot="step"
     slot-scope="props">
-    step-{{props.index}}
+    step-{{ props.index }}
   </view>
 </guide-tour>
+
 <container
   title="基础用法"
-  class="list">
+  className="list">
   <button
     onTap="openTour"
     data-field="baseVisible">
@@ -56,9 +57,10 @@
     受控模式
   </button>
 </container>
+
 <container
   title="插槽用法"
-  class="list">
+  className="list">
   <button
     onTap="openTour"
     data-field="slotVisible">

diff --git a/compiled/alipay/demo/pages/GuideTour/index.js b/compiled/alipay/demo/pages/GuideTour/index.js
@@ -1,52 +1,49 @@
 Page({
-  data: {
-    baseVisible: false,
-    moreVisible: false,
-    swiperVisible: false,
-    slotVisible: false,
-    controlledVisible: false,
-    current: 0,
-    list: [
-      {
-        left: 20,
-        top: 80,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png',
-        imageMode: 'widthFix',
-      },
-      {
-        left: 20,
-        top: 160,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png',
-      },
-      {
-        left: 20,
-        top: 220,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png',
-      },
-    ],
-  },
-  onChange(index) {
-    console.log('index', index);
-  },
-  onChangeControlled(index) {
-    this.setData({ current: index });
-  },
-  openTour(e) {
-    this.setData({
-      [e.target.dataset.field]: true,
-      current: 0,
-    });
-  },
-  closeTour() {
-    this.setData({
-      baseVisible: false,
-      moreVisible: false,
-      swiperVisible: false,
-      slotVisible: false,
-      controlledVisible: false,
-    });
-  },
+    data: {
+        baseVisible: false,
+        moreVisible: false,
+        swiperVisible: false,
+        slotVisible: false,
+        controlledVisible: false,
+        current: 0,
+        list: [
+            {
+                left: 20,
+                top: 80,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png',
+                imageMode: 'widthFix',
+            },
+            {
+                left: 20,
+                top: 160,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png',
+            },
+            {
+                left: 20,
+                top: 220,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png',
+            },
+        ],
+    },
+    onChange(index) {
+        console.log('index', index);
+    },
+    onChangeControlled(index) {
+        this.setData({ current: index });
+    },
+    openTour(e) {
+        this.setData({
+            [e.target.dataset.field]: true,
+            current: 0,
+        });
+    },
+    closeTour() {
+        this.setData({
+            baseVisible: false,
+            moreVisible: false,
+            swiperVisible: false,
+            slotVisible: false,
+            controlledVisible: false,
+        });
+    },
 });
diff --git a/...ed/alipay/demo/pages/GuideTour/index.acss → ...ed/alipay/demo/pages/GuideTour/index.less b/...ed/alipay/demo/pages/GuideTour/index.acss → ...ed/alipay/demo/pages/GuideTour/index.less
diff --git a/compiled/alipay/src/GuideTour/index.axml b/compiled/alipay/src/GuideTour/index.axml
@@ -1,98 +1,110 @@
 <import-sjs
   from="./index.sjs"
   name="utils" />
+
 <view
-  class="ant-guide-tour {{className?className:''}}"
-  style="{{style || ''}}"
-  a:if="{{visible}}">
+  a:if="{{ visible }}"
+  class="ant-guide-tour {{ className || '' }}"
+  style="{{ style || '' }}">
   <mask
     show
-    className="{{maskClassName}}"
-    style="z-index:9999;{{maskStyle || ''}}" />
-  <am-icon
+    className="{{ maskClassName }}"
+    style="z-index:9999;{{ maskStyle || '' }}" />
+  <ant-icon
     type="CloseOutline"
-    class="ant-guide-tour-clear"
+    className="ant-guide-tour-clear"
     onTap="onCancel" />
   <view class="ant-guide-tour-button">
-    <button
+    <ant-button
+      a:if="{{ utils.checkShowJump(mixin.value, items) }}"
       inline
       size="small"
-      a:if="{{utils.checkShowJump(mixin.value,items)}}"
       onTap="onCancel">
       跳过
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowPrev(mixin.value, items) }}"
       inline
       size="small"
       onTap="onPrev"
-      a:if="{{utils.checkShowPrev(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
+      data-currentValue="{{ mixin.value }}">
       上一步
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowNext(mixin.value, items) }}"
       inline
       size="small"
       onTap="onNext"
-      a:if="{{utils.checkShowNext(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
+      data-currentValue="{{ mixin.value }}">
       下一步
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowKnow(mixin.value, items) }}"
       inline
       size="small"
-      a:if="{{utils.checkShowKnow(mixin.value,items)}}"
       onTap="onCancel">
       知道了
-    </button>
+    </ant-button>
   </view>
-  <block a:if="{{swiperable}}">
+  <block a:if="{{ swiperable }}">
     <view class="ant-guide-tour-indicator">
-      <view
-        a:for="{{items}}"
-        class="ant-guide-tour-indicator-dot {{index === mixin.value ? 'ant-guide-tour-indicator-dot-active':''}}" />
+      <block
+        a:for="{{ items }}"
+        a:for-index="index"
+        a:for-item="item">
+        <view
+          class="ant-guide-tour-indicator-dot {{ index === mixin.value ? 'ant-guide-tour-indicator-dot-active' : '' }}" />
+      </block>
     </view>
     <swiper
       class="ant-guide-tour-swiper"
-      current="{{mixin.value}}"
+      current="{{ mixin.value }}"
       adjust-height="none"
       style="height: 100vh"
-      disable-touch="{{ture}}"
       onChange="onSwiperChange">
-      <swiper-item a:for="{{items}}">
-        <view
-          class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-          style="top:{{item.top}}px; left:{{item.left}}px">
-          <slot
-            name="step"
-            index="{{current}}">
-            <image
-              a:if="{{item.imageUrl}}"
-              class="ant-guide-tour-item-img"
-              src="{{item.imageUrl}}"
-              style="{{item.imageStyle}}"
-              mode="{{item.imageMode}}" />
-          </slot>
-        </view>
-      </swiper-item>
+      <block
+        a:for="{{ items }}"
+        a:for-index="index"
+        a:for-item="item">
+        <swiper-item>
+          <view
+            class="ant-guide-tour-item {{ item.className || '' }}"
+            style="top:{{ item.top }}px; left:{{ item.left }}px">
+            <slot
+              name="step"
+              index="{{ current }}">
+              <image
+                a:if="{{ item.imageUrl }}"
+                class="ant-guide-tour-item-img"
+                src="{{ item.imageUrl }}"
+                style="{{ item.imageStyle }}"
+                mode="{{ item.imageMode }}" />
+            </slot>
+          </view>
+        </swiper-item>
+      </block>
     </swiper>
   </block>
-  <block
-    a:else
-    a:for="{{items}}">
-    <view
-      class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-      style="top:{{item.top}}px; left:{{item.left}}px"
-      a:if="{{mixin.value === index}}">
-      <slot
-        name="step"
-        index="{{index}}">
-        <image
-          a:if="{{item.imageUrl}}"
-          class="ant-guide-tour-item-img"
-          src="{{item.imageUrl}}"
-          style="{{item.imageStyle}}"
-          mode="{{item.imageMode}}" />
-      </slot>
-    </view>
+  <block a:else>
+    <block
+      a:for="{{ items }}"
+      a:for-index="index"
+      a:for-item="item">
+      <view
+        a:if="{{ mixin.value === index }}"
+        class="ant-guide-tour-item {{ item.className || '' }}"
+        style="top:{{ item.top }}px; left:{{ item.left }}px">
+        <slot
+          name="step"
+          index="{{ index }}">
+          <image
+            a:if="{{ item.imageUrl }}"
+            class="ant-guide-tour-item-img"
+            src="{{ item.imageUrl }}"
+            style="{{ item.imageStyle }}"
+            mode="{{ item.imageMode }}" />
+        </slot>
+      </view>
+    </block>
   </block>
 </view>
diff --git a/compiled/alipay/src/GuideTour/index.json b/compiled/alipay/src/GuideTour/index.json
@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "mask": "../Mask/index",
-    "button": "../Button/index",
-    "am-icon": "../Icon/index"
+    "ant-button": "../Button/index",
+    "ant-icon": "../Icon/index"
   }
-}
+}
diff --git a/compiled/alipay/src/GuideTour/index.sjs b/compiled/alipay/src/GuideTour/index.sjs
@@ -11,8 +11,8 @@ function checkShowKnow(current, items) {
   return current === items.length - 1;
 }
 export default {
-  checkShowNext,
-  checkShowPrev,
-  checkShowJump,
-  checkShowKnow,
-};
+  checkShowNext: checkShowNext,
+  checkShowPrev: checkShowPrev,
+  checkShowJump: checkShowJump,
+  checkShowKnow: checkShowKnow
+};