TnPicker-选择器

Picker 选择器一般用于选择一项或者多项数据。

组件位置

nodeuni_modules

typescript

import TnPicker from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker.vue'

import TnPicker from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker.vue'

typescript

import TnPicker from '@/uni_modules/tuniaoui-vue3/components/picker/src/picker.vue'

import TnPicker from '@/uni_modules/tuniaoui-vue3/components/picker/src/picker.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model:open控制 Picker 的显示与隐藏
通过v-model绑定当前选择的值
通过data传递 Picker 的数据源，选择项

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

选择器模式

Picker 选择器组件会自动根据传递的data数据的类型来判断当前选择器的模式，目前支持以下几种模式：

单列选择器

可以通过以下两种模式来实现单列选择器：

通过data传递一个字符串或者整型数组，这时候选择器的每一项的值和显示内容对应为数组的每一项，此时v-model的值为字符串或者整型类型

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

通过data传递一个对象数组，这时候选择器的每一项的值和显示内容对应为对象的value和label属性，此时v-model的值为value属性的值的数组

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref(2)

const pickerData = [
  { label: '数值1', value: 1 },
  { label: '数值2', value: 2 },
  { label: '数值3', value: 3 },
  { label: '数值4', value: 4 },
  { label: '数值5', value: 5 },
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref(2)

const pickerData = [
  { label: '数值1', value: 1 },
  { label: '数值2', value: 2 },
  { label: '数值3', value: 3 },
  { label: '数值4', value: 4 },
  { label: '数值5', value: 5 },
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

多列选择器

通过data传递一个二维数组，二维数组中可以传递字符串、整型、包含label和value属性的对象，如果二维数组中是非对象类型的数据，此时选择器的每一项的值和显示内容对应为数组的每一项；如果二维数组中是对象类型的数据，此时选择器的每一项的值和显示内容对应为对象的value和label属性

在多列模式下v-model的值为value属性的值的数组

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref(['数值1', '数值2-a', '数值4-b'])

const pickerData = [
  ['数值1', '数值2', '数值3', '数值4', '数值5'],
  ['数值1-a', '数值2-a', '数值3-a', '数值4-a', '数值5-a'],
  ['数值1-b', '数值2-b', '数值3-b', '数值4-b', '数值5-b'],
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref(['数值1', '数值2-a', '数值4-b'])

const pickerData = [
  ['数值1', '数值2', '数值3', '数值4', '数值5'],
  ['数值1-a', '数值2-a', '数值3-a', '数值4-a', '数值5-a'],
  ['数值1-b', '数值2-b', '数值3-b', '数值4-b', '数值5-b'],
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref([1, 21, 42])

const pickerData = [
  [
    { label: '数值1', value: 1 },
    { label: '数值2', value: 2 },
    { label: '数值3', value: 3 },
    { label: '数值4', value: 4 },
    { label: '数值5', value: 5 },
  ],
  [
    { label: '数值1-a', value: 11 },
    { label: '数值2-a', value: 21 },
    { label: '数值3-a', value: 31 },
    { label: '数值4-a', value: 41 },
    { label: '数值5-a', value: 51 },
  ],
  [
    { label: '数值1-b', value: 12 },
    { label: '数值2-b', value: 22 },
    { label: '数值3-b', value: 32 },
    { label: '数值4-b', value: 42 },
    { label: '数值5-b', value: 52 },
  ],
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref([1, 21, 42])

const pickerData = [
  [
    { label: '数值1', value: 1 },
    { label: '数值2', value: 2 },
    { label: '数值3', value: 3 },
    { label: '数值4', value: 4 },
    { label: '数值5', value: 5 },
  ],
  [
    { label: '数值1-a', value: 11 },
    { label: '数值2-a', value: 21 },
    { label: '数值3-a', value: 31 },
    { label: '数值4-a', value: 41 },
    { label: '数值5-a', value: 51 },
  ],
  [
    { label: '数值1-b', value: 12 },
    { label: '数值2-b', value: 22 },
    { label: '数值3-b', value: 32 },
    { label: '数值4-b', value: 42 },
    { label: '数值5-b', value: 52 },
  ],
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

多列级联选择器

如果需要实现多列级联选择器，可以通过data传递一个对象数组，对象数组中包含label和value属性，value属性的值为下一级数据的数组，label属性的值为当前级别的显示内容，对应下一级的数据存放在children属性中，如果下一级已经没有数据了，可以不设置children属性

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref([2, 22, 223])

const pickerData = [
  {
    label: '小学部',
    value: 1,
    children: [
      {
        label: '一年级',
        value: 11,
        children: [
          {
            label: '一年级1班',
            value: 111,
          },
          {
            label: '一年级2班',
            value: 112,
          },
          {
            label: '一年级3班',
            value: 113,
          },
        ],
      },
      {
        label: '二年级',
        value: 12,
        children: [
          {
            label: '二年级1班',
            value: 121,
          },
          {
            label: '二年级2班',
            value: 122,
          },
          {
            label: '二年级3班',
            value: 123,
          },
        ],
      },
      {
        label: '三年级',
        value: 13,
        children: [
          {
            label: '三年级1班',
            value: 131,
          },
          {
            label: '三年级2班',
            value: 132,
          },
          {
            label: '三年级3班',
            value: 133,
          },
        ],
      },
    ],
  },
  {
    label: '初中部',
    value: 2,
    children: [
      {
        label: '初一',
        value: 21,
        children: [
          {
            label: '初一1班',
            value: 211,
          },
          {
            label: '初一2班',
            value: 212,
          },
          {
            label: '初一3班',
            value: 213,
          },
        ],
      },
      {
        label: '初二',
        value: 22,
        children: [
          {
            label: '初二1班',
            value: 221,
          },
          {
            label: '初二2班',
            value: 222,
          },
          {
            label: '初二3班',
            value: 223,
          },
        ],
      },
      {
        label: '初三',
        value: 23,
        children: [
          {
            label: '初三1班',
            value: 231,
          },
          {
            label: '初三2班',
            value: 232,
          },
          {
            label: '初三3班',
            value: 233,
          },
        ],
      },
    ],
  },
  {
    label: '高中部',
    value: 3,
    children: [
      {
        label: '高一',
        value: 31,
        children: [
          {
            label: '高一1班',
            value: 311,
          },
          {
            label: '高一2班',
            value: 312,
          },
          {
            label: '高一3班',
            value: 313,
          },
        ],
      },
      {
        label: '高二',
        value: 32,
        children: [
          {
            label: '高二1班',
            value: 321,
          },
          {
            label: '高二2班',
            value: 322,
          },
          {
            label: '高二3班',
            value: 323,
          },
        ],
      },
      {
        label: '高三',
        value: 33,
        children: [
          {
            label: '高三1班',
            value: 331,
          },
          {
            label: '高三2班',
            value: 332,
          },
          {
            label: '高三3班',
            value: 333,
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref([2, 22, 223])

const pickerData = [
  {
    label: '小学部',
    value: 1,
    children: [
      {
        label: '一年级',
        value: 11,
        children: [
          {
            label: '一年级1班',
            value: 111,
          },
          {
            label: '一年级2班',
            value: 112,
          },
          {
            label: '一年级3班',
            value: 113,
          },
        ],
      },
      {
        label: '二年级',
        value: 12,
        children: [
          {
            label: '二年级1班',
            value: 121,
          },
          {
            label: '二年级2班',
            value: 122,
          },
          {
            label: '二年级3班',
            value: 123,
          },
        ],
      },
      {
        label: '三年级',
        value: 13,
        children: [
          {
            label: '三年级1班',
            value: 131,
          },
          {
            label: '三年级2班',
            value: 132,
          },
          {
            label: '三年级3班',
            value: 133,
          },
        ],
      },
    ],
  },
  {
    label: '初中部',
    value: 2,
    children: [
      {
        label: '初一',
        value: 21,
        children: [
          {
            label: '初一1班',
            value: 211,
          },
          {
            label: '初一2班',
            value: 212,
          },
          {
            label: '初一3班',
            value: 213,
          },
        ],
      },
      {
        label: '初二',
        value: 22,
        children: [
          {
            label: '初二1班',
            value: 221,
          },
          {
            label: '初二2班',
            value: 222,
          },
          {
            label: '初二3班',
            value: 223,
          },
        ],
      },
      {
        label: '初三',
        value: 23,
        children: [
          {
            label: '初三1班',
            value: 231,
          },
          {
            label: '初三2班',
            value: 232,
          },
          {
            label: '初三3班',
            value: 233,
          },
        ],
      },
    ],
  },
  {
    label: '高中部',
    value: 3,
    children: [
      {
        label: '高一',
        value: 31,
        children: [
          {
            label: '高一1班',
            value: 311,
          },
          {
            label: '高一2班',
            value: 312,
          },
          {
            label: '高一3班',
            value: 313,
          },
        ],
      },
      {
        label: '高二',
        value: 32,
        children: [
          {
            label: '高二1班',
            value: 321,
          },
          {
            label: '高二2班',
            value: 322,
          },
          {
            label: '高二3班',
            value: 323,
          },
        ],
      },
      {
        label: '高三',
        value: 33,
        children: [
          {
            label: '高三1班',
            value: 331,
          },
          {
            label: '高三2班',
            value: 332,
          },
          {
            label: '高三3班',
            value: 333,
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :data="pickerData"
  />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

设置取消、确定按钮样式和文字

可以通过cancelText和confirmText属性设置取消、确定按钮的文字，通过cancelColor和confirmColor属性设置取消、确定按钮的颜色

可以通过设置showCancel为false隐藏取消按钮

组件同时预留了cancel和confirm插槽给用户自定义取消、确定按钮的内容

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :show-cancel="false"
    :data="pickerData"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker
    v-model="pickerValue"
    v-model:open="openPicker"
    :show-cancel="false"
    :data="pickerData"
  />
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker v-model="pickerValue" v-model:open="openPicker" :data="pickerData">
    <template #cancel>再考虑一下</template>
    <template #confirm>主意已决</template>
  </TnPicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const openPicker = ref(false)
const pickerValue = ref('数值2')

const pickerData = ['数值1', '数值2', '数值3', '数值4', '数值5']
</script>

<template>
  <TnPicker v-model="pickerValue" v-model:open="openPicker" :data="pickerData">
    <template #cancel>再考虑一下</template>
    <template #confirm>主意已决</template>
  </TnPicker>
</template>

API

Props

属性名	说明	类型	默认值	可选值
model-value/v-model	picker 选择器绑定的值	Array \| String \| Number	-	-
open/v-model:open	picker 选择器显示与隐藏	Boolean	`false`	`true`
data	picker 选择器选项的列数据	Array<string \| number> \| Array<Array<string \| number>> \| Array<object>	-	-
immediate-change	是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。	Boolean	`true`	`false`
allow-confirm-before-scroll-end	允许滑动结束前点击confirm按钮	Boolean	`false`	`true`
indicator-height	indicator的高度, 单位`px`	Number	`44`	-
label-key	picker 选项的数据 label 属性名	String	`label`	-
value-key	picker 选项的数据 value 属性名	String	`value`	-
children-key	picker 选项的数据 children 属性名, 在`级联选择器`模式下生效	String	`children`	-
show-cancel	显示取消按钮	Boolean	`true`	`false`
cancel-text	取消按钮的文本	String	取消	-
cancel-color	取消按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
show-confirm	显示确认按钮	Boolean	`true`	`false`
confirm-text	确认按钮的文本	String	确定	-
confirm-color	确认按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
mask	显示遮罩	Boolean	`false`	`true`
z-index	Picker 选择器的 zIndex	Number	20075	-

Event

事件名	说明	类型
change	Picker 选项发生改变	`(value: string \| number \| Array<string \| number>, index: number, item: any) => void`
confirm	点击确认事件	`(value: string \|number \|Array<string \|number>, item: any) => void`
cancel	点击取消事件	`() => void`
close	弹框关闭事件	`() => void`
pickstart	当滚动选择开始时候触发事件	`() => void`
pickend	当滚动选择结束时候触发事件	`() => void`

Expose

函数名	说明	类型
resetPickerViewIndex	重置 Picker 选择器的值	`() => void`
resetPickerIndexWithPosition	重置 Picker 选择器指定范围内的值	`(start: number, end?: number) => void`

Slots

插槽名	说明
cancel	取消按钮内容
confirm	确认按钮内容

TnPicker-选择器 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

选择器模式 ​

单列选择器 ​

多列选择器 ​

多列级联选择器 ​

设置取消、确定按钮样式和文字 ​

API ​

Props ​

Event ​

Expose ​

Slots ​