Fusions

Appearance

Picker 选择器 ​

iPhone

此组件选择器用于单列、多列联动的的选择场景。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 ref 获取到组件实例，调用 open、 close 方法显示与收起选择器。
  • 通过传入数组 columns 属性设置选择项。
html
<template>
    <fu-picker ref="pickerRef" :columns="columns"></fu-picker>
    <fu-button @click="handleOpen">打开选择器</fu-button>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const pickerRef = ref();
    const columns = reactive([
        ['选项1', '选项2', '选项3']
    ]);

    // methods方法
    const handleOpen = () => {
        pickerRef.value.open();
    };
</script>

设置多列模式与多列联动 ​

通过 columns 属性设置多列模式，数组的每一项为一列，每一列的元素为选项数组，此参数为二维数组，通过 change 事件完成联动操作。

html
<template>
    <fu-picker ref="pickerRef" :columns="columns" @change="handleChange"></fu-picker>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const pickerRef = ref();
    const columns = reactive([
        ['选项A', '选项B', '选项C'],
        ['选项A-1', '选项A-2', '选项A-3']
    ]);
    const columnData = reactive([
        ['选项A-1', '选项A-2', '选项A-3'],
        ['选项B-1', '选项B-2', '选项B-3'],
        ['选项C-1', '选项C-2', '选项C-3']
    ]);

    // methods方法
    const handleChange = (e) => {
        const {
            columnIndex,
            value,
            values, // values为当前变化列的数组内容
            index,
            indexs,
            picker = pickerRef.value
        } = e;

        // 当第一列值发生变化时，变化第二列（后一列）的选项内容
        if(columnIndex === 0) {
            // picker为选择器的实例对象，变化第二列对应的选项内容
            picker.setColumnValues(1, columnData[index]);
        }
    };

设置自定义选项值 ​

通过 columns 属性传入自定义选项值，可以通过 keyName 属性控制对应选项值的键名，默认为 value。

html
<template>
    <fu-picker ref="pickerRef" :columns="columns" keyName="label"></fu-picker>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const pickerRef = ref();
    const columns = reactive([
        [
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3 }
        ]
    ]);
</script>

设置默认值 ​

此组件的所有模式，都可以设置默认值，可以通过 defaultIndex 属性设置，数组元素的0表示选中每列的哪个值（从0开始），分别对模式进行说明：

注意：defaultIndex 数组的长度，必须与 columns 数组的长度一致。

  • 单列模式

设置 defaultIndex 属性为 [1]，表示默认选中第2个（从0开始）， [2] 表示默认选中第3个。

  • 多列模式

设置 defaultIndex 属性为 [1, 2]，表示第一列默认选中第2个，第二列默认选中第3个。

API ​

Picker Props ​

属性名说明类型默认值可选值
columns设置每一列的数组，详见上方基础用法Array--
bgColor设置背景色String#ffffff-
title设置标题String--
titleSize设置标题大小String｜Number--
titleColor设置标题颜色String#333333-
confirmText设置确认按钮文字String确定-
confirmSize设置确认按钮大小String｜Number13-
confirmColor设置确认按钮颜色String#2979ff-
cancelText设置取消按钮文字String取消-
cancelSize设置取消按钮大小String｜Number13-
cancelColor设置取消按钮颜色String#888888-
color设置选项文字颜色String--
activeColor设置选项选中文字颜色String--
visibleItemCount设置可见选项数量String｜Number5-
keyName设置选项值对应的键名Stringvalue-
defaultIndex设置默认选中项索引Array--
maskClosable设置蒙层是否可关闭Booleantrue-
itemHeight设置选项高度String｜Number44-
immediateChange是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信 2.21.1 及以上有效Booleanfalse-

Picker Methods ​

方法名说明
setIndexs(index, setLastIndex) 设置对应列的选择值
setColumnValues多列联动时需要用到，详见上方说明，注意 微信小程序 的特殊用法

Picker Events ​

事件名说明回调参数
confirm点击确定按钮时触发，返回当前选择的值() => void
cancel点击取消按钮时触发() => void
close关闭选择器时触发() => void
change当选择值变化时触发() => void

Picker Slot ​

名称说明
default自定义头部toolbar