docs(Signature): add background color demo (#11890)

* docs(Signature): add background color demo

* fix: update test snapshots

packages/vant/src/signature/README.md

@@ -59,7 +59,7 @@ Use `pen-color` prop to set the color of the brush stroke.
 <van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
 ```
 
-### LineWidth
+### Line Width
 
 Use `line-width` prop to set the width of the line.
 
@@ -67,6 +67,14 @@ Use `line-width` prop to set the width of the line.
 <van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
 ```
 
+### Background Color
+
+Use `background-color` prop to set the color of the background.
+
+```html
+<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
+```
+
 ## API
 
 ### Props

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

@@ -67,6 +67,14 @@ export default {
 <van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
 ```
 
+### 自定义背景颜色
+
+通过 `background-color` 来自定义背景颜色。
+
+```html
+<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
+```
+
 ## API
 
 ### Props

packages/vant/src/signature/demo/index.vue

@@ -7,14 +7,14 @@ import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
-    basic: '基础用法',
     penColor: '自定义颜色',
     lineWidth: '自定义线宽',
+    backgroundColor: '自定义背景颜色',
   },
   'en-US': {
-    basic: 'basic',
+    penColor: 'Pen Color',
-    penColor: 'penColor',
+    lineWidth: 'Line Width',
-    lineWidth: 'lineWidth',
+    backgroundColor: 'Background Color',
   },
 });
 
@@ -28,7 +28,7 @@ const onClear = () => showToast('clear');
 </script>
 
 <template>
-  <demo-block :title="t('basic')">
+  <demo-block :title="t('basicUsage')">
     <van-signature @submit="onSubmit" @clear="onClear" />
   </demo-block>
 
@@ -41,4 +41,12 @@ const onClear = () => showToast('clear');
   <demo-block :title="t('lineWidth')">
     <van-signature :line-width="6" @clear="onClear" @submit="onSubmit" />
   </demo-block>
+
+  <demo-block :title="t('backgroundColor')">
+    <van-signature
+      background-color="#eee"
+      @clear="onClear"
+      @submit="onSubmit"
+    />
+  </demo-block>
 </template>

packages/vant/src/signature/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -107,4 +107,39 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <!--[-->
+  <div class="van-signature">
+    <div class="van-signature__content">
+      <canvas width="0"
+              height="0"
+      >
+      </canvas>
+    </div>
+    <div class="van-signature__footer">
+      <button type="button"
+              class="van-button van-button--default van-button--small"
+              style
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            <!--[-->
+            Clear
+          </span>
+        </div>
+      </button>
+      <button type="button"
+              class="van-button van-button--primary van-button--small"
+              style
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            <!--[-->
+            Confirm
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
 `;

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

@@ -91,4 +91,34 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-signature">
+    <div class="van-signature__content">
+      <canvas width="100"
+              height="100"
+      >
+      </canvas>
+    </div>
+    <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">
+            Clear
+          </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">
+            Confirm
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
 `;