Picker 选择器

单列选择器

template

<vz-picker v-model="pickerValue" :data="listData" placeholder="请选择" border radius="20rpx"></vz-picker>

script

import { ref } from "vue";

const pickerValue = ref("");
const listData = ref(["A", "B", "C", "D", "E", "F", "G"]);

单列对象选择器

template

<vz-picker
  v-model="pickerValueObj"
  :data="listDataObj"
  :dataMap="{ value: 'id', label: 'name' }"
  placeholder="请选择"
  border
  radius="20rpx"
></vz-picker>

script

import { ref } from "vue";

const pickerValueObj = ref("");
const listDataObj = ref([
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 3, name: "C" },
  { id: 4, name: "D" },
  { id: 5, name: "E" },
  { id: 6, name: "F" },
  { id: 7, name: "G" },
]);

多列选择器

template

<vz-picker v-model="pickerValueMulti" :data="listDataMulti" placeholder="请选择" border radius="20rpx"></vz-picker>

script

import { ref } from "vue";

const pickerValueMulti = ref([]);
const listDataMulti = ref([
  ["A", "B", "C", "D", "E", "F", "G"],
  ["H", "I", "J", "K", "L", "M", "N"],
]);

多列对象选择器

template

<vz-picker
  v-model="pickerValueMultiObj"
  :data="listDataMultiObj"
  :dataMap="{ value: 'id', label: 'name' }"
  placeholder="请选择"
  border
  radius="20rpx"
></vz-picker>

script

import { ref } from "vue";

const pickerValueMultiObj = ref([]);
const listDataMultiObj = ref([
  [
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" },
    { id: 4, name: "D" },
    { id: 5, name: "E" },
    { id: 6, name: "F" },
    { id: 7, name: "G" },
  ],
  [
    { id: 11, name: "H" },
    { id: 12, name: "I" },
    { id: 13, name: "J" },
    { id: 14, name: "K" },
    { id: 15, name: "L" },
    { id: 16, name: "M" },
    { id: 17, name: "N" },
  ],
]);

禁用状态

template

<vz-picker v-model="pickerValue" :data="listData" placeholder="请选择" border disabled radius="20rpx"></vz-picker>

script

import { ref } from "vue";

const pickerValue = ref("");
const listData = ref(["A", "B", "C", "D", "E", "F", "G"]);

只读状态

template

<vz-picker v-model="pickerValue" :data="listData" placeholder="请选择" border readonly radius="20rpx"></vz-picker>

script

import { ref } from "vue";

const pickerValue = ref("");
const listData = ref(["A", "B", "C", "D", "E", "F", "G"]);

可清除

template

<vz-picker v-model="pickerValue" :data="listData" placeholder="请选择" border clearable radius="20rpx"></vz-picker>

script

import { ref } from "vue";

const pickerValue = ref("");
const listData = ref(["A", "B", "C", "D", "E", "F", "G"]);

Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number / (string / number)[]	-
data	选择器数据	Array	[]
data-map	数据 value & label 映射对象（注：微信小程序 dataMap）	object	-
placeholder	未选择时占位符	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否可清空	boolean	false
border	是否显示输入框边框	boolean	false
prefix-icon	前置图标	string	-
suffix-icon	后置图标	string	-
confirm-text	确定按钮文案	string	ConfirmView.confirmText
cancel-text	取消按钮文案	string	ConfirmView.cancelText
z-index	z-index	number \ string	Popup.zIndex
radius	弹窗圆角	string \ number	0
overlay-closeable	点击遮罩层是否关闭弹窗	boolean	true
safe-area-inset-bottom	是否开启底部安全区适配	boolean	Popup.safeAreaInsetBottom
mask-class	选择器未选中项蒙层的类名	string	vz-picker__mask
mask-style	选择器未选中项蒙层的样式	Vue.CSSProperties	-
indicator-class	选择器选中项的类名	string	vz-picker__indicator
indicator-style	选择器选中项的类名	Vue.CSSProperties	-
immediate-change	触发 columnchange 事件时机。true: 手指松开时立即触发; false: 滚动动画结束后触发;	boolean	false
separator	label 显示分隔符	string	-
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

DataMap

属性名	说明	类型	默认值
value	value 对应的 key 值	string / number	value
label	label 对应的 key 值	string / number	label

Events

事件名	说明	参数
confirm	点击确定按钮触发	{ value: (number / string)[], label: (number / string)[], index: number[] }
cancel	点击取消按钮触发	-
columnchange	列改变时触发	{ column: number; index: number }
clear	点击清空图标触发	-

Slots

插槽名	说明
default	默认插槽

CSS

变量名	说明	默认值
--vz-picker-content-padding	选择器内边距	30rpx 20rpx 0
--vz-picker-view-height	选择器滚动区高度	620rpx
--vz-picker-radius	选择器圆角	-
--vz-picker-indicator-height	选择器每项高度	100rpx

SCSS

$picker: (
  "view-height": 650rpx,
  "indicator-height": 100rpx,
  "mask-bg-color": getCssVar("bg-color", "rgb"),
);