HIPS-UNI-UI

# Picker 选择器

import Picker from '@hips/uni-ui/lib/picker';

export default {
  components: {
    'hips-picker': Picker,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-picker title="选择器" :picker-datas="dataSet1" @confirm="handleConfirm" />
1
export default {
  data() {
    return {
      dataSet1: ['1a', '2b', '3c'],
    };
  },
  methods: {
    handleConfirm(values) {
      console.log('handleConfirm values = ', values);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# 隐藏顶部栏

<hips-picker
  title="选择器"
  :show-toolbar="false"
  :picker-datas="dataSet1"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
export default {
  data() {
    return {
      dataSet1: ['1a', '2b', '3c'],
    };
  },
  methods: {
    handleConfirm(values) {
      console.log('handleConfirm values = ', values);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# 使用 title 插槽

注意

title 插槽 会覆盖 title 属性的赋值

<hips-picker
  :picker-datas="dataSet1"
  @confirm="handleConfirm"
  @click-title="handleClickTitle"
>
  <a slot="title" style="color: red">clear</a>
</hips-picker>
1
2
3
4
5
6
7
export default {
  data() {
    return {
      dataSet1: ['1a', '2b', '3c'],
    };
  },
  methods: {
    handleConfirm(values) {
      console.log('handleConfirm values = ', values);
    },
    handleClickTitle() {
      console.log('handleClickTitle');
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 多列

<hips-picker :picker-datas="dataSet3" @confirm="handleConfirm" />
1
export default {
  data() {
    return {
      dataSet3: [
        [
          '1a',
          '2b',
          '3c',
          '4d',
          '5e',
          '6f',
          '7g',
          '8h',
          '9i',
          '10j',
          '11k',
          '12l',
          '13m',
          '14n',
        ],
        ['a1', 'b2', 'c3', 'd4', 'e5', 'f6', 'g7', 'h8', 'i9'],
      ],
    };
  },
  methods: {
    handleConfirm(values) {
      console.log('handleConfirm values = ', values);
    },
  },
};
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

# 多列级联

<hips-picker :picker-datas="dataSet5" @confirm="handleConfirm" />
1
const dataSet5 = [
  {
    value: 'a',
    code: 'A',
    children: [
      {
        value: 'a-1',
        code: 'A-1',
        children: [{ value: 'a-1-1', code: 'A-1-1' }],
      },
      {
        value: 'a-2',
        code: 'A-2',
        children: [{ value: 'a-2-2', code: 'A-2-2' }],
      },
    ],
  },
  {
    value: 'b',
    code: 'B',
    children: [
      {
        value: 'b-1',
        code: 'B-1',
        children: [{ value: 'b-1-1', code: 'B-1-1' }],
      },
      {
        value: 'b-2',
        code: 'B-2',
        children: [{ value: 'b-2-2', code: 'B-2-2' }],
      },
    ],
  },
];

export default {
  data() {
    return {
      dataSet5,
    };
  },
  methods: {
    handleConfirm(values) {
      console.log('handleConfirm values = ', values);
    },
  },
};
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

# API

参数 说明 类型 默认值
picker-datas 对象数组，配置每一列显示的数据 Array []
show-toolbar 是否显示顶部栏 Boolean true
title 顶部栏标题 String ''
confirm-text 确认按钮文字 String 确认
cancel-text 取消按钮文字 String 取消
item-height 选项高度 Number 40
code-key 选项对象中，编码对应的 key (不能将值设置为 children 和 length等关键字) String code
selected-indexes 每列默认选中的索引值 Array []

selected-indexes 数组中，对应的项值如果为 undefind , 组件内部默认转为 0

# Event

Picker 组件的事件会根据 data 是单列或多列返回不同的参数

事件名 说明 参数
confirm 点击完成按钮时触发 [{ index: xxx, value: {xxx} },...]
index: 当前选中的 item 在当列的 index
value: 当前选中 item 的 value 和 code, 比如: {value: 'xxx', code: 'xxx'}
cancel 点击取消按钮时触发 -
click-title 点击 title 区域时触发 -

# Slot

名称 说明
title 自定义 picker 工具栏 title 的显示内容，插槽会覆盖 title 属性的传值

# picker-datas 数据结构

本组件通过数据结构不同来区分是普通 picker 还是级联 picker, 所以请严格按照以下数据结构进行配置

单列的 picker 支持一维数组形式传入 data

  • [1,2,3,4]
  • [{value: xxx, code: xxx}]

多列的 picker 支持二维数组的形式传入 data

  • [[1,2,3,4], [1,2,3,4]]
  • [[{value: xxx, code: xxx}], [{value: xxx, code: xxx}]]

级联的 picker 支持一维对象数组的形式传入 data, 如下所示：

[
  {
    value: 'A',
    code: 'a',
    children: [{ value: 'A-a' }, { value: 'A-b' }, { value: 'A-c' }],
  },
  {
    value: 'B',
    code: 'b',
    children: [{ value: 'B-a' }, { value: 'B-b' }],
  },
];
1
2
3
4
5
6
7
8
9
10
11
12

注意

  1. 组件会将 code 对应值展示在选择器上。

  2. 示例中的 code 字段可以修改为其他字段，如果修改，则需要配置 code-key 参数与之对应。

  3. 子节点请务必使用 children 字段。

# 样式变量

变量名 说明 默认值
picker-toolbar-height 80rpx
picker-toolbar-border-color #eeeeee
picker-title-color #666666
picker-title-font-size 32rpx
picker-button-bg-color white
picker-button-active-bg-color #e8e8e8
picker-button-confirm-color #1F8CEB
picker-button-cancel-color #999999

注意

DatetimePicker 时间选择器