FormaUI文档

Appearance

引入组件 ​

局部引入

ts
// parent.vue
const FPicker = defineAsyncComponent(() => import('@/components/formaui/f-picker/f-picker.vue'))

基础用法 ​

通过 v-model 控制显隐，items 使用 label / value / children 结构。

html
<f-button width="200rpx" margin="24rpx auto" @click="show = true">单列选择</f-button>
<f-picker v-model="show" :layer="1" :items="items" title="请选择" is-radius @change="onChange" @cancel="onCancel" />
ts
import { ref } from 'vue'
import type { FPickerChangeDetail, FPickerItem } from '@/components/formaui/f-picker/types'

const show = ref(false)
const items = ref<FPickerItem[]>([
  { label: '中国', value: 'CN' },
  { label: '美国', value: 'US' },
  { label: '日本', value: 'JP' }
])

const onChange = (detail: FPickerChangeDetail) => {
  uni.showToast({ title: detail.result, icon: 'none' })
}

const onCancel = () => {
  uni.showToast({ title: '取消选择', icon: 'none' })
}

多级联动 ​

layer属性：数据层级（默认1），可传入[1、2、3]

html
<f-picker v-model="show" :layer="2" :items="cityItems" title="请选择省市" @change="onChange" />
ts
const cityItems: FPickerItem[] = [
  {
    label: '广东省',
    value: 'gd',
    children: [
      { label: '广州市', value: 'gz' },
      { label: '深圳市', value: 'sz' }
    ]
  },
  {
    label: '浙江省',
    value: 'zj',
    children: [
      { label: '杭州市', value: 'hz' },
      { label: '宁波市', value: 'nb' }
    ]
  }
]

三列示例：

html
<f-picker v-model="show" :layer="3" :items="districtItems" title="请选择省市区" @change="onChange" />

设置默认值 ​

defaultLabels属性：按 label 匹配的默认选中文本集合

html
<f-picker v-model="show" :layer="2" :items="cityItems" :default-labels="['浙江省', '宁波市']" @change="onChange" />

圆角与样式 ​

isRadius属性：顶部圆角（默认false）

html
<f-picker v-model="show" :items="items" is-radius />

confirmColor / cancelColor / title 等头部样式

html
<f-picker
  v-model="show"
  :items="items"
  title="请选择"
  confirm-color="#16479D"
  cancel-color="#8d94a6"
  title-size="34rpx" />

插槽 ​

名称说明
--

属性 ​

名称类型说明默认值
v-modelboolean是否显示false
layernumber | string数据层级，可传入[1、2、3]1
itemsFPickerItem[]选项数据[]
defaultLabelsstring[]默认选中项文本集合（按 label）[]
maskStylestringpicker-view 蒙层样式-
isRadiusboolean是否圆角false
headerBgColorstring头部背景色#FFFFFF
titlestring标题-
titleSizestring标题字体大小34rpx
titleColorstring标题字体颜色#0b1d4a
confirmTextstring确定按钮文字确定
confirmColorstring确定按钮颜色主题主色
cancelTextstring取消按钮文字取消
cancelColorstring取消按钮颜色#8d94a6
btnSizestring按钮字体大小28rpx
isBoldboolean按钮是否加粗false
bgColorstring内容区背景色#FFFFFF
colorstring选项文字颜色#0b1d4a
fontSizestring选项文字大小16px
closeOnClickMaskboolean点击遮罩是否关闭true
paramsnumber | string自定义参数，事件回调带回0
zIndexnumberz-index998

FPickerItem ​

名称类型说明默认值
labelstring显示文本-
valuestring | number选项值-
childrenFPickerItem[]子级选项（多级联动）-

事件 ​

事件名说明回调参数
change点击确定时触发{ labels, values, index, result, params }（见下方）
cancel取消或点击遮罩关闭时触发{ params }
pickstart开始滚动时触发{ params }
pickend滚动结束时触发（微信小程序）{ params }

change 回调字段 ​

字段类型说明
labelsstring | string[]选中文本；单列为 string，多列为数组
valuesstring | number | (string | number)[]选中值；单列为单值，多列为数组
indexnumber[]各列选中索引
resultstring文本拼接结果
paramsnumber | string自定义参数

方法 ​

方法名说明传入参数
open打开选择器（可选）-
close关闭选择器（可选）-

可通过 ref 调用 open / close，也可直接使用 v-model。