feat(Picker): add confirm、cancel slot (#7377)

src/picker/README.md

@@ -270,9 +270,11 @@ Picker events will pass different parameters according to the columns are single
 ### Slots
 
 | Name               | Description                  |
-| -------------- | ---------------------------- |
+| ------------------ | ---------------------------- |
 | default            | Custom toolbar content       |
 | title              | Custom title                 |
+| confirm `v2.10.11` | Custom confirm button text   |
+| cancel `v2.10.11`  | Custom cancel button text    |
 | columns-top        | Custom content above columns |
 | columns-bottom     | Custom content below columns |
 

src/picker/README.zh-CN.md

@@ -293,9 +293,11 @@ export default {
 ### Slots
 
 | 名称               | 说明                   |
-| -------------- | ------------------ |
+| ------------------ | ---------------------- |
-| default        | 自定义顶部栏内容   |
+| default            | 自定义整个顶部栏的内容 |
 | title              | 自定义标题内容         |
+| confirm `v2.10.11` | 自定义确认按钮内容     |
+| cancel `v2.10.11`  | 自定义取消按钮内容     |
 | columns-top        | 自定义选项上方内容     |
 | columns-bottom     | 自定义选项下方内容     |
 

src/picker/index.js

@@ -270,22 +270,30 @@ export default createComponent({
       }
     },
 
+    genCancel() {
+      return (
+        <button type="button" class={bem('cancel')} onClick={this.cancel}>
+          {this.slots('cancel') || this.cancelButtonText || t('cancel')}
+        </button>
+      );
+    },
+
+    genConfirm() {
+      return (
+        <button type="button" class={bem('confirm')} onClick={this.confirm}>
+          {this.slots('confirm') || this.confirmButtonText || t('confirm')}
+        </button>
+      );
+    },
+
     genToolbar() {
       if (this.showToolbar) {
         return (
           <div class={bem('toolbar')}>
             {this.slots() || [
-              <button type="button" class={bem('cancel')} onClick={this.cancel}>
+              this.genCancel(),
-                {this.cancelButtonText || t('cancel')}
-              </button>,
               this.genTitle(),
-              <button
+              this.genConfirm(),
-                type="button"
-                class={bem('confirm')}
-                onClick={this.confirm}
-              >
-                {this.confirmButtonText || t('confirm')}
-              </button>,
             ]}
           </div>
         );

src/picker/test/__snapshots__/index.spec.js.snap

@@ -88,6 +88,21 @@ exports[`not allow html 1`] = `
 </div>
 `;
 
+exports[`render confirm/cancel slot 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">Custom Cancel</button><button type="button" class="van-picker__confirm">Custom Confirm</button></div>
+  <!---->
+  <div class="van-picker__columns" style="height: 264px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`render title slot 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>

src/picker/test/index.spec.js

@@ -138,13 +138,23 @@ test('column watch default index', async () => {
 test('render title slot', () => {
   const wrapper = mount({
     template: `
-      <picker show-toolbar>
+      <van-picker show-toolbar>
         <template v-slot:title>Custom title</template>
-      </picker>
+      </van-picker>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render confirm/cancel slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker show-toolbar>
+        <template v-slot:confirm>Custom Confirm</template>
+        <template v-slot:cancel>Custom Cancel</template>
+      </van-picker>
     `,
-    components: {
-      Picker,
-    },
   });
 
   expect(wrapper).toMatchSnapshot();