fix: 修复GuideTour内置中文文案问题 (#1133)

Co-authored-by: shijia.sj <[email protected]>

Author: ajiaberry

compiled/alipay/demo/pages/GuideTour/index.axml

@@ -24,7 +24,11 @@
   items="{{ list }}"
   visible="{{ slotVisible }}"
   onCancel="closeTour"
-  onChange="onChange">
+  onChange="onChange"
+  jumpText="跳过"
+  gotItText="知道了"
+  prevStepText="上一步"
+  nextStepText="下一步">
   <view
     class="step-box"
     slot="step"

compiled/alipay/src/GuideTour/index.axml

@@ -20,30 +20,30 @@
       inline
       size="small"
       onTap="onCancel">
-      跳过
+      {{ jumpText }}
     </ant-button>
     <ant-button
       a:if="{{ utils.checkShowPrev(mixin.value, items) }}"
       inline
       size="small"
       onTap="onPrev"
       data-currentValue="{{ mixin.value }}">
-      上一步
+      {{ prevStepText }}
     </ant-button>
     <ant-button
       a:if="{{ utils.checkShowNext(mixin.value, items) }}"
       inline
       size="small"
       onTap="onNext"
       data-currentValue="{{ mixin.value }}">
-      下一步
+      {{ nextStepText }}
     </ant-button>
     <ant-button
       a:if="{{ utils.checkShowKnow(mixin.value, items) }}"
       inline
       size="small"
       onTap="onCancel">
-      知道了
+      {{ gotItText }}
     </ant-button>
   </view>
   <block a:if="{{ swiperable }}">

compiled/alipay/src/GuideTour/index.md

@@ -36,6 +36,10 @@ toc: 'content'
 | `visible`     | 是否显示       | `boolean`                     | `false`|
 | `onCancel`    | 关闭回调       | `() => void`                 | -      |
 | `onChange`    | 步骤改变回调   | `(index: number) => void`    | -      |
+| `jumpText`    | 跳过按钮的文案     | `string`                     | '跳过' |
+| `prevStepText`| 上一步按钮的文案     | `string`                     | '上一步' |
+| `nextStepText`| 下一步按钮的文案     | `string`                     | '下一步' |
+| `gotItText`| 知道了按钮的文案     | `string`                     | '知道了' |
 
 ### GuideTourItem 
 

compiled/alipay/src/GuideTour/props.ts

@@ -65,13 +65,37 @@ export interface IGuideTour extends IBaseProps {
    * @description 步骤改变回调
    */
   onChange: (index: number) => boolean;
+   /**
+   * @description 上一步按钮文案
+   * @default "上一步"
+   */
+  prevStepText?: string;
+   /**
+   * @description 下一步按钮文案
+   * @default "下一步"
+   */
+  nextStepText?: string;
+   /**
+   * @description 知道了按钮文案
+   * @default "知道了"
+   */
+  gotItText?: string;
+   /**
+   * @description 跳过按钮文案
+   * @default "跳过"
+   */
+  jumpText?: string;
 }
 
 export const GuideTourDefaultProps: Partial<IGuideTour> = {
   visible: false,
   swiperable: false,
   items: [],
   defaultCurrent: 0,
+  gotItText: '知道了',
+  nextStepText: '下一步',
+  prevStepText: '上一步',
+  jumpText: '跳过'
 };
 
 export const GuideTourFunctionalProps: Partial<IGuideTour> = {

compiled/wechat/src/GuideTour/index.md

@@ -36,6 +36,10 @@ toc: 'content'
 | `visible`     | 是否显示       | `boolean`                     | `false`|
 | `onCancel`    | 关闭回调       | `() => void`                 | -      |
 | `onChange`    | 步骤改变回调   | `(index: number) => void`    | -      |
+| `jumpText`    | 跳过按钮的文案     | `string`                     | '跳过' |
+| `prevStepText`| 上一步按钮的文案     | `string`                     | '上一步' |
+| `nextStepText`| 下一步按钮的文案     | `string`                     | '下一步' |
+| `gotItText`| 知道了按钮的文案     | `string`                     | '知道了' |
 
 ### GuideTourItem 
 

compiled/wechat/src/GuideTour/index.wxml

@@ -20,30 +20,30 @@
       inline
       size="small"
       bind:tap="onCancel">
-      跳过
+      {{ jumpText }}
     </ant-button>
     <ant-button
       wx:if="{{ utils.checkShowPrev(mixin.value, items) }}"
       inline
       size="small"
       bind:tap="onPrev"
       data-currentValue="{{ mixin.value }}">
-      上一步
+      {{ prevStepText }}
     </ant-button>
     <ant-button
       wx:if="{{ utils.checkShowNext(mixin.value, items) }}"
       inline
       size="small"
       bind:tap="onNext"
       data-currentValue="{{ mixin.value }}">
-      下一步
+      {{ nextStepText }}
     </ant-button>
     <ant-button
       wx:if="{{ utils.checkShowKnow(mixin.value, items) }}"
       inline
       size="small"
       bind:tap="onCancel">
-      知道了
+      {{ gotItText }}
     </ant-button>
   </view>
   <block wx:if="{{ swiperable }}">

compiled/wechat/src/GuideTour/props.js

@@ -3,6 +3,10 @@ export var GuideTourDefaultProps = {
     swiperable: false,
     items: [],
     defaultCurrent: 0,
+    gotItText: '知道了',
+    nextStepText: '下一步',
+    prevStepText: '上一步',
+    jumpText: '跳过'
 };
 export var GuideTourFunctionalProps = {
     maskStyle: '',

demo/pages/GuideTour/index.axml.tsx

@@ -46,6 +46,10 @@ export default ({
       visible={slotVisible}
       onCancel="closeTour"
       onChange="onChange"
+      jumpText='跳过'
+      gotItText='知道了'
+      prevStepText='上一步'
+      nextStepText='下一步'
     >
       <View class="step-box" slot="step" slot-scope="props">
         step-{props.index}

src/GuideTour/index.axml.tsx

@@ -24,6 +24,10 @@ export default (
     items,
     visible,
     swiperable,
+    jumpText,
+    nextStepText,
+    prevStepText,
+    gotItText
   }: TSXMLProps<IGuideTour>,
   { mixin, current }: InternalData
 ) => (
@@ -43,7 +47,7 @@ export default (
         <View class="ant-guide-tour-button">
           {utils.checkShowJump(mixin.value, items) && (
             <AntButton inline size="small" onTap="onCancel">
-              跳过
+              {jumpText}
             </AntButton>
           )}
           {utils.checkShowPrev(mixin.value, items) && (
@@ -53,7 +57,7 @@ export default (
               onTap="onPrev"
               data-currentValue={mixin.value}
             >
-              上一步
+              {prevStepText}
             </AntButton>
           )}
           {utils.checkShowNext(mixin.value, items) && (
@@ -63,12 +67,12 @@ export default (
               onTap="onNext"
               data-currentValue={mixin.value}
             >
-              下一步
+              {nextStepText}
             </AntButton>
           )}
           {utils.checkShowKnow(mixin.value, items) && (
             <AntButton inline size="small" onTap="onCancel">
-              知道了
+              {gotItText}
             </AntButton>
           )}
         </View>

src/GuideTour/index.md

@@ -36,6 +36,10 @@ toc: 'content'
 | `visible`     | 是否显示       | `boolean`                     | `false`|
 | `onCancel`    | 关闭回调       | `() => void`                 | -      |
 | `onChange`    | 步骤改变回调   | `(index: number) => void`    | -      |
+| `jumpText`    | 跳过按钮的文案     | `string`                     | '跳过' |
+| `prevStepText`| 上一步按钮的文案     | `string`                     | '上一步' |
+| `nextStepText`| 下一步按钮的文案     | `string`                     | '下一步' |
+| `gotItText`| 知道了按钮的文案     | `string`                     | '知道了' |
 
 ### GuideTourItem 
 

src/GuideTour/props.ts

@@ -65,13 +65,37 @@ export interface IGuideTour extends IBaseProps {
    * @description 步骤改变回调
    */
   onChange: (index: number) => boolean;
+   /**
+   * @description 上一步按钮文案
+   * @default "上一步"
+   */
+  prevStepText?: string;
+   /**
+   * @description 下一步按钮文案
+   * @default "下一步"
+   */
+  nextStepText?: string;
+   /**
+   * @description 知道了按钮文案
+   * @default "知道了"
+   */
+  gotItText?: string;
+   /**
+   * @description 跳过按钮文案
+   * @default "跳过"
+   */
+  jumpText?: string;
 }
 
 export const GuideTourDefaultProps: Partial<IGuideTour> = {
   visible: false,
   swiperable: false,
   items: [],
   defaultCurrent: 0,
+  gotItText: '知道了',
+  nextStepText: '下一步',
+  prevStepText: '上一步',
+  jumpText: '跳过'
 };
 
 export const GuideTourFunctionalProps: Partial<IGuideTour> = {