Merge branch 'dev' into next

src/picker/PickerColumn.js

@@ -50,7 +50,7 @@ export default createComponent({
 
   emits: ['change'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     let moving;
     let startOffset;
     let touchStartTime;
@@ -258,7 +258,7 @@ export default createComponent({
 
         return (
           <li {...data}>
-            <div {...childData} />
+            {slots.option ? slots.option(option) : <div {...childData} />}
           </li>
         );
       });

src/picker/README.md

@@ -267,12 +267,15 @@ Picker events will pass different parameters according to the columns are single
 
 ### Slots
 
-| Name           | Description                  |
-| -------------- | ---------------------------- |
-| default        | Custom toolbar content       |
-| title          | Custom title                 |
-| columns-top    | Custom content above columns |
-| columns-bottom | Custom content below columns |
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default | Custom toolbar content | - |
+| title | Custom title | - |
+| confirm `v2.10.11` | Custom confirm button text | - |
+| cancel `v2.10.11` | Custom cancel button text | - |
+| option `v2.10.11` | Custom option content | _option: string \| object_ |
+| columns-top | Custom content above columns | - |
+| columns-bottom | Custom content below columns | - |
 
 ### Data Structure of Column
 

src/picker/README.zh-CN.md

@@ -290,16 +290,19 @@ export default {
 
 ### Slots
 
-| 名称           | 说明               |
-| -------------- | ------------------ |
-| default        | 自定义顶部栏内容   |
-| title          | 自定义标题内容     |
-| columns-top    | 自定义选项上方内容 |
-| columns-bottom | 自定义选项下方内容 |
+| 名称               | 说明                   | 参数                       |
+| ------------------ | ---------------------- | -------------------------- |
+| default            | 自定义整个顶部栏的内容 | -                          |
+| title              | 自定义标题内容         | -                          |
+| confirm `v2.10.11` | 自定义确认按钮内容     | -                          |
+| cancel `v2.10.11`  | 自定义取消按钮内容     | -                          |
+| option `v2.10.11`  | 自定义选项内容         | _option: string \| object_ |
+| columns-top        | 自定义选项上方内容     | -                          |
+| columns-bottom     | 自定义选项下方内容     | -                          |
 
 ### Column 数据结构
 
-当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
+当传入多列数据时，`columns` 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 `key`:
 
 | 键名              | 说明                       | 类型       |
 | ----------------- | -------------------------- | ---------- |

src/picker/index.js

@@ -213,25 +213,31 @@ export default createComponent({
       }
     };
 
+    const renderCancel = () => {
+      const text = props.cancelButtonText || t('cancel');
+      return (
+        <button type="button" class={bem('cancel')} onClick={cancel}>
+          {slots.cancel ? slots.cancel() : text}
+        </button>
+      );
+    };
+
+    const renderConfirm = () => {
+      const text = props.confirmButtonText || t('confirm');
+      return (
+        <button type="button" class={bem('confirm')} onClick={confirm}>
+          {slots.confirm ? slots.confirm() : text}
+        </button>
+      );
+    };
+
     const renderToolbar = () => {
       if (props.showToolbar) {
         return (
           <div class={bem('toolbar')}>
             {slots.default
               ? slots.default()
-              : [
-                  <button type="button" class={bem('cancel')} onClick={cancel}>
-                    {props.cancelButtonText || t('cancel')}
-                  </button>,
-                  renderTitle(),
-                  <button
-                    type="button"
-                    class={bem('confirm')}
-                    onClick={confirm}
-                  >
-                    {props.confirmButtonText || t('confirm')}
-                  </button>,
-                ]}
+              : [renderCancel(), renderTitle(), renderConfirm()]}
           </div>
         );
       }
@@ -240,6 +246,7 @@ export default createComponent({
     const renderColumnItems = () =>
       formattedColumns.value.map((item, columnIndex) => (
         <PickerColumn
+          v-slots={{ option: slots.option }}
           readonly={props.readonly}
           valueKey={props.valueKey}
           allowHtml={props.allowHtml}

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

@@ -88,6 +88,57 @@ 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 option slot with object columns 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__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;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</li>
+      </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 option slot with simple columns 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__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;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</li>
+      </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.legacy.js

@@ -138,12 +138,54 @@ test('column watch default index', async () => {
 test('render title slot', () => {
   const wrapper = mount({
     template: `
-      <picker>
+      <van-picker>
         <template v-slot:title>Custom title</template>
-      </picker>
+      </van-picker>
     `,
-    components: {
-      Picker,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render confirm/cancel slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker>
+        <template v-slot:confirm>Custom Confirm</template>
+        <template v-slot:cancel>Custom Cancel</template>
+      </van-picker>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with simple columns', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker :columns="columns" show-toolbar>
+        <template #option="item">{{ item }}</template>
+      </van-picker>
+    `,
+    data() {
+      return { columns: ['foo', 'bar'] };
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with object columns', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker :columns="columns" show-toolbar>
+        <template #option="item">{{ item.text }}</template>
+      </van-picker>
+    `,
+    data() {
+      return {
+        columns: [{ text: 'foo' }, { text: 'bar' }],
+      };
     },
   });