fix(Guide): fix the hideSkip attribute being invalid (#3371)

Tencent · Dec 19, 2024 · 365d6e5 · 365d6e5
1 parent 6d7c4c7
commit 365d6e5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 16 deletions.
diff --git a/src/guide/_example/guide.wxml b/src/guide/_example/guide.wxml
@@ -1,4 +1,6 @@
-<t-navbar class="demo-navbar" title="Guide" leftArrow />
+<view class="custom-navbar">
+  <t-navbar class="demo-navbar" title="Guide" leftArrow />
+</view>
 
 <view class="demo">
   <view class="demo-title">Guide 引导</view>

diff --git a/src/guide/content.wxml b/src/guide/content.wxml
@@ -1,18 +1,18 @@
 <import src="../common/template/button.wxml" />
 <template name="content">
-  <slot wx:if="{{!title && !body}}" name="content-{{current}}"></slot>
+  <slot wx:if="{{!title && !body}}" name="content-{{current}}" />
   <block wx:else>
     <view class="{{prefix}}-class-tooltip">
       <view wx:if="{{title}}" class="{{prefix}}-class-title {{classPrefix}}__title--{{modeType}}">{{title}}</view>
-      <slot wx:else name="title-{{current}}"></slot>
+      <slot wx:else name="title-{{current}}" />
       <view wx:if="{{body}}" class="{{prefix}}-class-body {{classPrefix}}__body--{{modeType}}">{{body}}</view>
-      <slot wx:else name="body-{{current}}"></slot>
+      <slot wx:else name="body-{{current}}" />
     </view>
     <view class="{{prefix}}-class-footer {{classPrefix}}__footer {{classPrefix}}__footer--{{modeType}}">
-      <template is="button" wx:if="{{current < steps.length - 1}}" data="{{...skipButton}}"></template>
-      <template is="button" wx:else data="{{...backButton}}"></template>
-      <template is="button" wx:if="{{current < steps.length - 1}}" data="{{...nextButton}}"></template>
-      <template is="button" wx:else data="{{...finishButton}}"></template>
+      <template is="button" wx:if="{{current < steps.length - 1 && !hideSkip}}" data="{{...skipButton}}" />
+      <template is="button" wx:else data="{{...backButton}}" />
+      <template is="button" wx:if="{{current < steps.length - 1}}" data="{{...nextButton}}" />
+      <template is="button" wx:else data="{{...finishButton}}" />
     </view>
   </block>
 </template>
diff --git a/src/guide/guide.less b/src/guide/guide.less
@@ -46,13 +46,16 @@
     box-shadow: 0 0 0 0 @guide-reference-mask-color, @guide-reference-mask-color 0 0 0 5000px;
     border-radius: @guide-reference-border-radius;
     transition: all @anim-duration-base @anim-time-fn-ease-out;
+
     &--nonoverlay {
       box-shadow: none;
       border: @guide-reference-border;
     }
   }
+
   &__container {
     display: inline-block;
+
     &--popover {
       background-color: @guide-popover-bg-color;
       border: @guide-popover-border;
@@ -62,27 +65,31 @@
       min-width: @guide-popover-min-width;
       max-width: @guide-popover-max-width;
     }
+
     &--dialog {
       background-color: @guide-popover-bg-color;
       border-radius: @guide-dialog-border-radius;
       padding: @guide-dialog-padding;
       width: @guide-dialog-width;
     }
   }
+
   &__title--popover {
     text-align: @guide-popover-title-text-align;
     color: @guide-title-color;
     font-size: @guide-popover-title-font-size;
     font-weight: @guide-title-font-weight;
     line-height: @guide-popover-title-line-height;
   }
+
   &__title--dialog {
     text-align: @guide-dialog-title-text-align;
     color: @guide-title-color;
     font-size: @guide-dialog-title-font-size;
     font-weight: @guide-title-font-weight;
     line-height: @guide-dialog-title-line-height;
   }
+
   &__body--popover {
     margin-top: @guide-popover-body-margin-top;
     text-align: @guide-popover-body-text-align;
@@ -91,6 +98,7 @@
     font-weight: @guide-body-font-weight;
     line-height: @guide-popover-body-line-height;
   }
+
   &__body--dialog {
     margin-top: @guide-dialog-body-margin-top;
     text-align: @guide-dialog-body-text-align;
@@ -99,18 +107,19 @@
     font-weight: @guide-body-font-weight;
     line-height: @guide-dialog-body-line-height;
   }
+
   &__footer {
     text-align: @guide-footer-text-align;
     margin-top: @guide-footer-margin-top;
+
     .@{prefix}-guide__button + .@{prefix}-guide__button {
       margin-left: @guide-footer-button-space;
     }
-    .@{prefix}-guide__button--hidden {
-      display: none;
-    }
+
     &--dialog {
       display: flex;
       padding: @guide-dialog-footer-button-padding;
+
       .@{prefix}-guide__button:last-child {
         flex-grow: 1;
       }

diff --git a/src/guide/guide.ts b/src/guide/guide.ts
@@ -126,9 +126,7 @@ export default class Guide extends SuperComponent {
         content: '跳过',
         size,
         ...skipButton,
-        class: `${prefix}-class-skip ${name}__button ${step.hideSkip ? `${name}__button--hidden` : ''} ${
-          skipButton?.class || ''
-        }`,
+        class: `${prefix}-class-skip ${name}__button ${skipButton?.class || ''}`,
         type: 'skip',
       };
       let nextButton = step.nextButtonProps ?? this.data.nextButtonProps;

diff --git a/src/guide/guide.wxml b/src/guide/guide.wxml
@@ -18,7 +18,7 @@
     >
       <template
         is="content"
-        data="{{ prefix: prefix, classPrefix: classPrefix, title: title, body: body, steps: steps, current: current, modeType: modeType, ...buttonProps }}"
+        data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, ...buttonProps }}"
       />
     </view>
   </view>
@@ -37,7 +37,7 @@
     >
       <template
         is="content"
-        data="{{ prefix: prefix, classPrefix: classPrefix, title: title, body: body, steps: steps, current: current, modeType: modeType, ...buttonProps }}"
+        data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, ...buttonProps }}"
       />
     </view>
   </view>