From f735468dd5879f19a3f4285ab1ddf9629ddd3849 Mon Sep 17 00:00:00 2001
From: EmberSpirit <85718018+wangKBweb@users.noreply.github.com>
Date: Tue, 3 May 2022 22:08:11 +0800
Subject: [PATCH] feat(ui/picker): add props textFormatter (#522)

---
 packages/varlet-ui/src/picker/Picker.vue      |  29 +-
 .../src/picker/__tests__/component.spec.js    |  17 ++
 .../src/picker/__tests__/index.spec.js        |  21 ++
 packages/varlet-ui/src/picker/docs/en-US.md   | 264 ++++++++++++++++++
 packages/varlet-ui/src/picker/docs/zh-CN.md   | 264 ++++++++++++++++++
 .../varlet-ui/src/picker/example/index.vue    | 130 ++++++++-
 .../src/picker/example/locale/en-US.ts        |   2 +
 .../src/picker/example/locale/zh-CN.ts        |   2 +
 packages/varlet-ui/src/picker/index.ts        |   1 +
 packages/varlet-ui/src/picker/props.ts        |   4 +
 packages/varlet-ui/types/picker.d.ts          |   1 +
 11 files changed, 728 insertions(+), 7 deletions(-)

diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
index 19b2c74974f..9b374ae5d75 100644
--- a/packages/varlet-ui/src/picker/Picker.vue
+++ b/packages/varlet-ui/src/picker/Picker.vue
@@ -69,7 +69,7 @@
             @transitionend="handleTransitionend(c)"
           >
             <div :class="n('option')" :style="{ height: `${optionHeight}px` }" v-for="t in c.column.texts" :key="t">
-              <div :class="n('text')">{{ t }}</div>
+              <div :class="n('text')">{{ textFormatter(t, c.columnIndex) }}</div>
             </div>
           </div>
         </div>
@@ -103,6 +103,7 @@ export interface ScrollColumn {
   id: number
   touching: boolean
   index: number
+  columnIndex: number
   prevY: number | undefined
   momentumPrevY: number | undefined
   momentumTime: number
@@ -246,7 +247,7 @@ export default defineComponent({
     }
 
     const normalizeNormalColumns = (normalColumns: NormalColumn[]) => {
-      return normalColumns.map((column: NormalColumn | any[]) => {
+      return normalColumns.map((column: NormalColumn | any[], columnIndex: number) => {
         const normalColumn = (isArray(column) ? { texts: column } : column) as NormalColumn
         const scrollColumn: ScrollColumn = {
           id: sid++,
@@ -255,6 +256,7 @@ export default defineComponent({
           touching: false,
           translate: center.value,
           index: normalColumn.initialIndex ?? 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -269,12 +271,17 @@ export default defineComponent({
     const normalizeCascadeColumns = (cascadeColumns: CascadeColumn[]) => {
       const scrollColumns: ScrollColumn[] = []
 
-      createChildren(scrollColumns, cascadeColumns, true)
+      createChildren(scrollColumns, cascadeColumns, 0, true)
 
       return scrollColumns
     }
 
-    const createChildren = (scrollColumns: ScrollColumn[], children: CascadeColumn[], initial = false) => {
+    const createChildren = (
+      scrollColumns: ScrollColumn[],
+      children: CascadeColumn[],
+      columnIndex: number,
+      initial = false
+    ) => {
       if (isArray(children) && children.length) {
         const index = initial ? props.cascadeInitialIndexes[scrollColumns.length] ?? 0 : 0
 
@@ -285,6 +292,7 @@ export default defineComponent({
           touching: false,
           translate: center.value,
           index,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -297,13 +305,22 @@ export default defineComponent({
 
         scrollColumns.push(scrollColumn)
         scrollTo(scrollColumn, scrollColumn.index, 0, true)
-        createChildren(scrollColumns, (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children, initial)
+        createChildren(
+          scrollColumns,
+          (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children,
+          columnIndex + 1,
+          initial
+        )
       }
     }
 
     const rebuildChildren = (scrollColumn: ScrollColumn) => {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1)
-      createChildren(scrollColumns.value, (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children)
+      createChildren(
+        scrollColumns.value,
+        (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children,
+        scrollColumn.columnIndex + 1
+      )
     }
 
     const change = (scrollColumn: ScrollColumn) => {
diff --git a/packages/varlet-ui/src/picker/__tests__/component.spec.js b/packages/varlet-ui/src/picker/__tests__/component.spec.js
index 7fab543e503..afabe746cc2 100644
--- a/packages/varlet-ui/src/picker/__tests__/component.spec.js
+++ b/packages/varlet-ui/src/picker/__tests__/component.spec.js
@@ -191,3 +191,20 @@ test('test cascade initial indexes', async () => {
   expect(wrapper.html()).toMatchSnapshot()
   wrapper.unmount()
 })
+
+test('test picker component textFormatter', async () => {
+  const textFormatter = jest.fn().mockReturnValue('text')
+
+  const wrapper = mount(VarPicker, {
+    props: {
+      columns,
+      textFormatter,
+    },
+  })
+
+  const pickerText = wrapper.find('.var-picker__text')
+
+  expect(pickerText.text()).toBe('text')
+
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/picker/__tests__/index.spec.js b/packages/varlet-ui/src/picker/__tests__/index.spec.js
index 4435e0b8701..efb54f5a82e 100644
--- a/packages/varlet-ui/src/picker/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/picker/__tests__/index.spec.js
@@ -73,3 +73,24 @@ test('test picker functional cancel', async () => {
   await delay(16)
   await delay(300)
 })
+
+test('test picker functional textFormatter', async () => {
+  const textFormatter = jest.fn().mockReturnValue('text')
+
+  const columns = [['A']]
+
+  Picker({
+    columns,
+    textFormatter,
+  })
+  await delay(16)
+  await delay(300)
+
+  await trigger(document.querySelector('.var-picker__cancel-button'), 'click')
+
+  expect(textFormatter).toHaveBeenLastCalledWith('A', 0)
+  expect(document.querySelector('.var-picker__text').innerHTML).toBe('text')
+
+  await delay(16)
+  await delay(300)
+})
diff --git a/packages/varlet-ui/src/picker/docs/en-US.md b/packages/varlet-ui/src/picker/docs/en-US.md
index f2d3cca8ebc..3037ec0386a 100644
--- a/packages/varlet-ui/src/picker/docs/en-US.md
+++ b/packages/varlet-ui/src/picker/docs/en-US.md
@@ -71,6 +71,147 @@ const picker = async () => {
 </template>
 ```
 
+### Text Formatter
+
+Picker passes in a `textFormatter` attribute to customize the text.
+`textFormatter` accepts two parameters. The first parameter `text` is the current text, and the second parameter  `columnIndex` is the subscript of the column where the current text is located.
+
+```html
+<script setup>
+import { Picker } from '@varlet/ui'
+
+const months = genCounts(12)
+
+const leapYearFebruaryDates = genCounts(29)
+
+const februaryDates = genCounts(28)
+
+const oddMonthDates = genCounts(31)
+
+const evenMonthDates = genCounts(30)
+
+function isOddMonth(month) {
+  return [1, 3, 5, 7, 8, 10, 12].includes(month)
+}
+
+function genCounts(length) {
+  return Array.from({ length }, (_, index) => index + 1)
+}
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+}
+
+function genDates(year, month) {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+  
+function genColumns(startYear, endYear) {
+  const columns = []
+  for (let i = startYear; i < endYear; i++) {
+    columns.push({
+      text: i,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(i, month).map(date => {
+            return { text: date }
+          })
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+const columns = ref(genColumns(1970, 2100))
+
+const textFormatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text}year`
+  else if (columnIndex === 1) return `${text}month`
+  else if (columnIndex === 2) return `${text}date`
+}
+
+const picker = async () => {
+  const { state, texts, indexes } = await Picker({
+    cascade: true,
+    columns,
+    textFormatter,
+  })
+}
+</script>
+
+<template>
+  <var-button type="primary" block @click="picker">textFormatter</var-button>
+</template>
+```
+
+### Mapping of values
+
+```html
+<script setup>
+import { Picker， Snackbar } from '@varlet/ui'
+
+const serverColumns = ref([
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+])
+
+const normalizedRawColumns = rawColumns.map((column) => {
+  return column.map(option => option.label)
+})
+
+const columns = ref(normalizedRawColumns)
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar(ids.toString())
+}
+
+const picker = async () => {
+  const { state, texts, indexes } = await Picker({
+    cascade: true,
+    columns,
+    onChange: handleChange
+  })
+}
+</script>
+
+<template>
+  <var-button type="primary" block @click="picker">Mapping of values</var-button>
+</template>
+```
+
 ## Component Call
 
 ### Single-column Picker
@@ -120,6 +261,128 @@ const columns = ref(area)
 </template>
 ```
 
+### textFormatter
+
+```html
+<script setup>
+import { Picker } from '@varlet/ui'
+
+const months = genCounts(12)
+
+const leapYearFebruaryDates = genCounts(29)
+
+const februaryDates = genCounts(28)
+
+const oddMonthDates = genCounts(31)
+
+const evenMonthDates = genCounts(30)
+
+function isOddMonth(month) {
+  return [1, 3, 5, 7, 8, 10, 12].includes(month)
+}
+
+function genCounts(length) {
+  return Array.from({ length }, (_, index) => index + 1)
+}
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+}
+
+function genDates(year, month) {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+  
+function genColumns(startYear, endYear) {
+  const columns = []
+  for (let i = startYear; i < endYear; i++) {
+    columns.push({
+      text: i,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(i, month).map(date => {
+            return { text: date }
+          })
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+const columns = ref(genColumns(1970, 2100))
+
+const textFormatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text}year`
+  else if (columnIndex === 1) return `${text}month`
+  else if (columnIndex === 2) return `${text}date`
+}
+</script>
+
+<template>
+  <var-picker cascade :columns="columns" :text-formatter="textFormatter" />
+</template>
+```
+
+### Mapping of values
+
+```html
+<script setup>
+import { Picker， Snackbar } from '@varlet/ui'
+
+const rawColumns = [
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ]
+]
+
+const normalizedRawColumns = rawColumns.map((column) => {
+  return column.map(option => option.label)
+})
+
+const columns = ref(normalizedRawColumns)
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar(ids.toString())
+}
+</script>
+
+<template>
+  <var-picker :columns="columns" @change="handleChange" />
+</template>
+```
+
 ## API
 
 ### Props
@@ -132,6 +395,7 @@ const columns = ref(area)
 | `toolbar` | Whether to display the top toolbar | _string_ | `true` |
 | `cascade` | Whether to enable cascading mode | _boolean_ | `true` |
 | `cascade-initial-indexes` | List of initialization indices for cascade mode | _number[]_ | `-` |
+| `text-formatter` | Text formatter | _function_ | `text => text` |
 | `option-height` | Option height(px rem) | _string \| number_ | `44` |
 | `option-count` | Number of options visible | _string \| number_ | `6` |
 | `confirm-button-text` | Confirm button text | _string_ | `Confirm` |
diff --git a/packages/varlet-ui/src/picker/docs/zh-CN.md b/packages/varlet-ui/src/picker/docs/zh-CN.md
index f0cb5dd0605..65027c32fe9 100644
--- a/packages/varlet-ui/src/picker/docs/zh-CN.md
+++ b/packages/varlet-ui/src/picker/docs/zh-CN.md
@@ -71,6 +71,147 @@ const picker = async () => {
 </template>
 ```
 
+### 文本格式化
+
+Picker 传入一个 `textFormatter` 属性可对文本进行自定义。
+`textFormatter` 接受两个参数, 第一个参数 `text` 是当前文本, 第二个参数 `columnIndex` 是当前文本所在列的下标。
+
+```html
+<script setup>
+import { Picker } from '@varlet/ui'
+
+const months = genCounts(12)
+
+const leapYearFebruaryDates = genCounts(29)
+
+const februaryDates = genCounts(28)
+
+const oddMonthDates = genCounts(31)
+
+const evenMonthDates = genCounts(30)
+
+function isOddMonth(month) {
+	return [1, 3, 5, 7, 8, 10, 12].includes(month)
+}
+
+function genCounts(length) {
+  return Array.from({ length }, (_, index) => index + 1)
+}
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+}
+
+function genDates(year, month) {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+  
+function genColumns(startYear, endYear) {
+  const columns = []
+  for (let i = startYear; i < endYear; i++) {
+    columns.push({
+      text: i,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(i, month).map(date => {
+            return { text: date }
+          })
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+const columns = ref(genColumns(1970, 2100))
+
+const textFormatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text}年`
+  else if (columnIndex === 1) return `${text}月`
+  else if (columnIndex === 2) return `${text}日`
+}
+
+const picker = async () => {
+  const { state, texts, indexes } = await Picker({
+    cascade: true,
+    columns,
+    textFormatter,
+  })
+}
+</script>
+
+<template>
+  <var-button type="primary" block @click="picker">文本格式化</var-button>
+</template>
+```
+
+### 值的映射
+
+```html
+<script setup>
+import { Picker， Snackbar } from '@varlet/ui'
+
+const rawColumns = [
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ]
+]
+
+const normalizedRawColumns = rawColumns.map((column) => {
+  return column.map(option => option.label)
+})
+
+const columns = ref(normalizedRawColumns)
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar(ids.toString())
+}
+
+const picker = async () => {
+  const { state, texts, indexes } = await Picker({
+    cascade: true,
+    columns,
+    onChange: handleChange
+  })
+}
+</script>
+
+<template>
+  <var-button type="primary" block @click="picker">值的映射</var-button>
+</template>
+```
+
 ## 组件调用
 
 ### 单列选择
@@ -120,6 +261,128 @@ const columns = ref(area)
 </template>
 ```
 
+### 文本格式化
+
+```html
+<script setup>
+import { Picker } from '@varlet/ui'
+
+const months = genCounts(12)
+
+const leapYearFebruaryDates = genCounts(29)
+
+const februaryDates = genCounts(28)
+
+const oddMonthDates = genCounts(31)
+
+const evenMonthDates = genCounts(30)
+
+function isOddMonth(month) {
+	return [1, 3, 5, 7, 8, 10, 12].includes(month)
+}
+
+function genCounts(length) {
+  return Array.from({ length }, (_, index) => index + 1)
+}
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+}
+
+function genDates(year, month) {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+  
+function genColumns(startYear, endYear) {
+  const columns = []
+  for (let i = startYear; i < endYear; i++) {
+    columns.push({
+      text: i,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(i, month).map(date => {
+            return { text: date }
+          })
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+const columns = ref(genColumns(1970, 2100))
+
+const textFormatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text}年`
+  else if (columnIndex === 1) return `${text}月`
+  else if (columnIndex === 2) return `${text}日`
+}
+</script>
+
+<template>
+  <var-picker cascade :columns="columns" :text-formatter="textFormatter" />
+</template>
+```
+
+### 值的映射
+
+```html
+<script setup>
+import { Picker， Snackbar } from '@varlet/ui'
+
+const rawColumns = [
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ]
+]
+
+const normalizedRawColumns = rawColumns.map((column) => {
+  return column.map(option => option.label)
+})
+
+const columns = ref(normalizedRawColumns)
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar(ids.toString())
+}
+</script>
+
+<template>
+  <var-picker :columns="columns" @change="handleChange" />
+</template>
+```
+
 ## API
 
 ### 属性
@@ -132,6 +395,7 @@ const columns = ref(area)
 | `toolbar` | 是否显示上方工具栏 | _string_ | `true` |
 | `cascade` | 是否开启级联模式 | _boolean_ | `true` |
 | `cascade-initial-indexes` | 级联模式的初始化索引列表 | _number[]_ | `-` |
+| `text-formatter` | 文本格式化 | _function_ | `text => text` |
 | `option-height` | 选项的高度(px rem) | _string \| number_ | `44` |
 | `option-count` | 可见的选项个数 | _string \| number_ | `6` |
 | `confirm-button-text` | 确认按钮文字 | _string_ | `确认` |
diff --git a/packages/varlet-ui/src/picker/example/index.vue b/packages/varlet-ui/src/picker/example/index.vue
index bdfbaf488ff..be0218ba4a1 100644
--- a/packages/varlet-ui/src/picker/example/index.vue
+++ b/packages/varlet-ui/src/picker/example/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import Picker from '../index'
+import Snackbar from '../../snackbar/index'
 import VarSpace from '../../space'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
@@ -11,6 +12,8 @@ import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
 const VarPicker = Picker.Component
 
+const VarSnackbar = Snackbar.Component
+
 const columns = ref([Array.from({ length: 20 }).map((_, index) => index)])
 
 const columns2 = ref([
@@ -21,8 +24,110 @@ const columns2 = ref([
 
 const columns3 = ref(area)
 
+const months = genCounts(12)
+
+const leapYearFebruaryDates = genCounts(29)
+
+const februaryDates = genCounts(28)
+
+const oddMonthDates = genCounts(31)
+
+const evenMonthDates = genCounts(30)
+
+function isOddMonth(month) {
+  return [1, 3, 5, 7, 8, 10, 12].includes(month)
+}
+
+function genCounts(length) {
+  return Array.from({ length }, (_, index) => index + 1)
+}
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+}
+
+function genDates(year, month) {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+
+function genColumns(startYear, endYear) {
+  const columns = []
+  for (let year = startYear; year < endYear; year++) {
+    columns.push({
+      text: year,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(year, month).map((date) => {
+            return { text: date }
+          }),
+        }
+      }),
+    })
+  }
+
+  return columns
+}
+
+const columns4 = ref(genColumns(1970, 2100))
+
+const formatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text}年`
+  if (columnIndex === 1) return `${text}月`
+  if (columnIndex === 2) return `${text}日`
+}
+
+const rawColumns = [
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+  [
+    { label: '灰烬之灵', id: 1 },
+    { label: '风暴之灵', id: 2 },
+    { label: '大地之灵', id: 3 },
+    { label: '虚空之灵', id: 4 },
+  ],
+]
+
+const normalizedRawColumns = rawColumns.map((column) => {
+  return column.map((option) => option.label)
+})
+
+const columns5 = ref(normalizedRawColumns)
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar({
+    content: ids,
+  })
+}
+
 const picker = async () => {
-  await Picker(columns.value)
+  await Picker({
+    columns: columns.value,
+  })
 }
 
 const picker2 = async () => {
@@ -36,6 +141,21 @@ const picker3 = async () => {
   })
 }
 
+const picker4 = async () => {
+  await Picker({
+    cascade: true,
+    columns: columns4.value,
+    textFormatter: formatter,
+  })
+}
+
+const picker5 = async () => {
+  await Picker({
+    columns: columns5.value,
+    onChange: handleChange,
+  })
+}
+
 watchLang(use)
 watchDarkMode(dark)
 </script>
@@ -46,6 +166,8 @@ watchDarkMode(dark)
     <var-button type="primary" block @click="picker">{{ pack.singlePicker }}</var-button>
     <var-button type="primary" block @click="picker2">{{ pack.multiplePicker }}</var-button>
     <var-button type="primary" block @click="picker3">{{ pack.cascadePicker }}</var-button>
+    <var-button type="primary" block @click="picker4">{{ pack.textFormatter }}</var-button>
+    <var-button type="primary" block @click="picker5">{{ pack.extension }}</var-button>
   </var-space>
 
   <app-type>{{ pack.componentCall }}</app-type>
@@ -58,4 +180,10 @@ watchDarkMode(dark)
 
   <app-type>{{ pack.cascadePicker }}</app-type>
   <var-picker cascade :columns="columns3" />
+
+  <app-type>{{ pack.textFormatter }}</app-type>
+  <var-picker cascade :columns="columns4" :text-formatter="formatter" />
+
+  <app-type>{{ pack.extension }}</app-type>
+  <var-picker :columns="columns5" :text-formatter="formatter2" @change="handleChange" />
 </template>
diff --git a/packages/varlet-ui/src/picker/example/locale/en-US.ts b/packages/varlet-ui/src/picker/example/locale/en-US.ts
index 22466e34e5b..af02ed367b2 100644
--- a/packages/varlet-ui/src/picker/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/picker/example/locale/en-US.ts
@@ -4,4 +4,6 @@ export default {
   singlePicker: 'Single Column Picker',
   multiplePicker: 'Multiple Column Picker',
   cascadePicker: 'Cascade Column Picker',
+  textFormatter: 'Text Formatting',
+  extension: 'Value Mapping',
 }
diff --git a/packages/varlet-ui/src/picker/example/locale/zh-CN.ts b/packages/varlet-ui/src/picker/example/locale/zh-CN.ts
index 1e82c014c85..b3e1880bd4a 100644
--- a/packages/varlet-ui/src/picker/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/picker/example/locale/zh-CN.ts
@@ -4,4 +4,6 @@ export default {
   singlePicker: '单列选择',
   multiplePicker: '多列选择',
   cascadePicker: '级联选择',
+  textFormatter: '文本格式化',
+  extension: '值的映射',
 }
diff --git a/packages/varlet-ui/src/picker/index.ts b/packages/varlet-ui/src/picker/index.ts
index 35e35042785..ab6031e69e9 100644
--- a/packages/varlet-ui/src/picker/index.ts
+++ b/packages/varlet-ui/src/picker/index.ts
@@ -23,6 +23,7 @@ interface PickerOptions {
   cancelButtonTextColor?: string
   teleport?: TeleportProps['to']
   dynamic?: boolean
+  textFormatter?: (text: any, columnIndex: number) => any
   onOpen?: () => void
   onOpened?: () => void
   onClose?: () => void
diff --git a/packages/varlet-ui/src/picker/props.ts b/packages/varlet-ui/src/picker/props.ts
index bbdaf3dea6b..ae8ee81ba99 100644
--- a/packages/varlet-ui/src/picker/props.ts
+++ b/packages/varlet-ui/src/picker/props.ts
@@ -71,6 +71,10 @@ export const props = {
   onCancel: {
     type: Function as PropType<(texts: Texts, indexes: number[]) => void>,
   },
+  textFormatter: {
+    type: Function as PropType<(text: any, columnIndex: number) => any>,
+    default: (text: any) => text,
+  },
   // dynamic internal
   ...pickProps(popupProps, [
     'show',
diff --git a/packages/varlet-ui/types/picker.d.ts b/packages/varlet-ui/types/picker.d.ts
index 09404d72213..2c28158e694 100644
--- a/packages/varlet-ui/types/picker.d.ts
+++ b/packages/varlet-ui/types/picker.d.ts
@@ -60,6 +60,7 @@ export interface PickerOptions {
   cancelButtonText?: string
   confirmButtonTextColor?: string
   cancelButtonTextColor?: string
+  textFormatter?: (text: any, columnIndex: number) => any
   onOpen?: () => void
   onOpened?: () => void
   onClose?: () => void