feat(Signature): support custom button text (#11798)

packages/vant/src/signature/README.md

@@ -72,6 +72,8 @@ export default {
 | pen-color | Color of the brush stroke, default is black | _string_ | `#000` |
 | line-width | Width of the line | _number_ | `3` |
 | tips | Text that appears when Canvas is not supported | _string_ | - |
+| cancel-button-text | Cancel button text | _string_ | `Cancel` |
+| confirm-button-text | Confirm button text | _string_ | `Confirm` |
 
 ### Events
 

packages/vant/src/signature/README.zh-CN.md

@@ -66,12 +66,14 @@ export default {
 
 ### Props
 
-| 参数       | 说明                                 | 类型     | 默认值 |
-| ---------- | ------------------------------------ | -------- | ------ |
-| type       | 导出图片类型                         | _string_ | `png`  |
-| pen-color  | 笔触颜色，默认黑色                   | _string_ | `#000` |
-| line-width | 线条宽度                             | _number_ | `3`    |
-| tips       | 当不支持 Canvas 的时候出现的提示文案 | _string_ | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 导出图片类型 | _string_ | `png` |
+| pen-color | 笔触颜色，默认黑色 | _string_ | `#000` |
+| line-width | 线条宽度 | _number_ | `3` |
+| tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - |
+| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
+| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
 
 ### Events
 

packages/vant/src/signature/Signature.tsx

@@ -18,10 +18,12 @@ import { Button } from '../button';
 const [name, bem, t] = createNamespace('signature');
 
 export const signatureProps = {
-  type: makeStringProp('png'),
-  lineWidth: makeNumberProp(3),
-  penColor: makeStringProp('#000'),
   tips: String,
+  type: makeStringProp('png'),
+  penColor: makeStringProp('#000'),
+  lineWidth: makeNumberProp(3),
+  cancelButtonText: String,
+  confirmButtonText: String,
 };
 
 export type SignatureProps = ExtractPropTypes<typeof signatureProps>;
@@ -149,10 +151,10 @@ export default defineComponent({
         </div>
         <div class={bem('footer')}>
           <Button size="small" onClick={clear}>
-            {t('cancel')}
+            {props.cancelButtonText || t('cancel')}
           </Button>
           <Button type="primary" size="small" onClick={submit}>
-            {t('confirm')}
+            {props.confirmButtonText || t('confirm')}
           </Button>
         </div>
       </div>

packages/vant/src/signature/test/__snapshots__/index.spec.ts.snap

@@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should allow to custom button text 1`] = `
+<div class="van-signature__footer">
+  <button type="button"
+          class="van-button van-button--default van-button--small"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Bar
+      </span>
+    </div>
+  </button>
+  <button type="button"
+          class="van-button van-button--primary van-button--small"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Foo
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
 exports[`should render tips correctly 1`] = `
 <div class="van-signature">
   <div class="van-signature__content">

packages/vant/src/signature/test/index.spec.ts

@@ -79,3 +79,14 @@ test('should render tips correctly', async () => {
   expect(wrapper.html()).toMatchSnapshot();
   spy.mockRestore();
 });
+
+test('should allow to custom button text', async () => {
+  const wrapper = mount(Signature, {
+    props: {
+      confirmButtonText: 'Foo',
+      cancelButtonText: 'Bar',
+    },
+  });
+
+  expect(wrapper.find('.van-signature__footer').html()).toMatchSnapshot();
+});