列选择器
列选择器组件。
数据模式
通过 data-mode 属性数据模式：
lists- 二维数组列模式，每一项表示一列的数据
vue
<template>
<pure-picker
data-mode="lists"
:list="lists"
:indexes="indexes"
></pure-picker>
</template>
<script setup>
import { ref } from "vue";
// 列数据
const lists = ref([
[
{ label: "工具类", value: "1" },
{ text: "家居类", value: "2" }
],
[
{ label: "钳子", value: "1-1" },
{ text: "卡扣", value: "1-2" }
]
]);
// 选中项
const indexes = ref([0, 0]);
</script>children- 默认，级联模式，数据为一维数组，每一项的children-key属性表示下一级数据
vue
<template>
<pure-picker
data-mode="children"
:list="list"
:indexes="indexes"
:children-key="children"
></pure-picker>
</template>
<script setup>
import { ref } from "vue";
// 列数据
const list = ref([
{
label: "工具类",
value: "1",
children: [
{ label: "钳子", value: "1-1" },
{ text: "卡扣", value: "1-2" }
]
},
{
label: "家居类",
value: "2",
children: [
{ label: "壁画", value: "2-1" },
{ text: "凳子", value: "2-2" }
]
}
]);
// 选中项
const indexes = ref([0, 0]);
</script>选中项
- 通过
indexes设置选中项，其中每项表示对应列选中项的索引
提示
每次弹窗打开组件时，组件内部会重新计算一下选中项，所以在监听到确认事件中需更新 indexes 值，否则，组件打开后还是会显示上次选中的项。
vue
<template>
<pure-picker
:list="list"
:indexes="indexes"
@onOk="onOk"
></pure-picker>
</template>
<script setup>
import { ref } from "vue";
// 选中项
// 选中第一列的索引为 0，第二列的索引为 0
const indexes = ref([0, 0]);
// 列数据
const list = ref([
{
label: "工具类",
value: "1",
children: [
{ label: "钳子", value: "1-1" },
{ text: "卡扣", value: "1-2" }
]
},
{
label: "家居类",
value: "2",
children: [
{ label: "壁画", value: "2-1" },
{ text: "凳子", value: "2-2" }
]
}
]);
// 确认事件
function onOk(_indexes_, _items) {
indexes.value = _indexes;
}
</script>- 通过
values设置选中项，其中每项表示对应列选中项的value-key
提示
每次弹窗打开组件时，组件内部会重新计算一下选中项，所以在监听到确认事件中需更新 values 值，否则，组件打开后还是会显示上次选中的项。
vue
<template>
<pure-picker
:list="list"
:values="values"
value-key="value"
@onOk="onOk"
></pure-picker>
</template>
<script setup>
import { ref } from "vue";
// 选中项
// 选中第一列的索引为 1，第二列的索引为 1
// 上面组件中是将 value-key 设置成了 value，如果想把 label 设置为选中项的值，可以把 value-key 设置为 label，那么 values = ["家居类", "凳子"]
const values = ref(["2", "2-2"]);
// 列数据
const list = ref([
{
label: "工具类",
value: "1",
children: [
{ label: "钳子", value: "1-1" },
{ text: "卡扣", value: "1-2" }
]
},
{
label: "家居类",
value: "2",
children: [
{ label: "壁画", value: "2-1" },
{ text: "凳子", value: "2-2" }
]
}
]);
// 确认事件
function onOk(_indexes_, _items) {
values.value = _items.map((item) => item.value);
// 如果 value-key 为 label
// values.value = _items.map((item) => item.label);
}
</script>显示列数
通过 cols 属性设置显示的列数，默认显示 1 列。
vue
<template>
<pure-picker
:list="list"
:values="values"
:cols="2"
@onOk="onOk"
></pure-picker>
</template>显示行数
通过 rows 属性设置显示的行数，默认显示 8 行。
vue
<template>
<pure-picker
:list="list"
:values="values"
:rows="6"
@onOk="onOk"
></pure-picker>
</template>省市区选择器
可以通过此组件快速简单的实现省市区选择器。
提示
省市区数据需自行组建，建议安装 element-china-area-data 包
bash
npm i element-china-area-datavue
<template>
<pure-picker
:list="regionData"
:values="values"
:cols="3"
valueKey="label"
@onOk="onOk"
></pure-picker>
</template>
<script setup>
import { ref } from "vue";
import { regionData } from "element-china-area-data";
// 选中项
const values = ref(["山东省", "济南市", "历下区"]);
// 确认事件
function onOk(_indexes_, _items) {
values.value = _items.map((item) => item.label);
}
</script>属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
list | Array | 列数据 | |
dataMode | String | children | 数据模式 |
indexes | Array | undefined | 选中项的索引 |
values | Array | undefined | 选中项的值 |
labelKey | String | label | 字段标签 key |
valueKey | String | label | 字段值 key |
childrenKey | String | label | 字段子数据 key |
rowHeight | String | 3em | 行的高度 |
rows | Number | 8 | 显示的行数 |
cols | Number | 1 | 显示的列数 |
hoverClass | String | pure-hover | 按下去的样式类 |
show | Boolean | false | 显示状态 |
mask | Boolean | false | 是否显示遮罩 |
maskClickable | Boolean | true | 遮罩是否可点击关闭 |
title | String | 标题 | |
showNot | Boolean | true | 是否显示顶部取消按钮 |
notlText | String | 关闭 | 顶部取消按钮文本 |
notTheme | String | info | 顶部取消按钮主题 |
notOpts | Object | {} | 顶部取消按钮配置项 参考 |
showOk | Boolean | true | 是否显示顶部确认按钮 |
okText | String | 确定 | 顶部确认按钮文本 |
okTheme | String | primary | 顶部确认按钮主题 |
okOpts | Object | {} | 顶部确认按钮配置项 参考 |
showCancel | Boolean | false | 是否显示底部取消按钮 |
cancelText | String | 取消 | 底部取消按钮文本 |
cancelTheme | String | info | 底部取消按钮主题 |
cancelOpts | Object | {} | 底部取消按钮配置项 参考 |
showConfirm | Boolean | false | 是否底部显示确认按钮 |
confirmText | String | 确认 | 底部确认按钮文本 |
confirmTheme | String | primary | 底部确认按钮主题 |
confirmOpts | Object | {} | 底部确认按钮配置项 参考 |
scrollable | Boolean | true | 内容是否可滚动 |
headerLine | Boolean | false | 是否显示 Header 下边框 |
footerLine | Boolean | false | 是否显示 Footer 上边框 |
buttonLine | Boolean | false | 是否显示底部按钮分割线 |
width | String | 宽度 | |
height | String | 高度 | |
maxWidth | String | 最大宽度 | |
maxHeight | String | 最大高度 |
事件
| 名称 | 参数 | 说明 |
|---|---|---|
onClose | 点击遮罩关闭事件 | |
onNot | 顶部取消按钮点击事件 | |
onOk | indexes: 选中项的下标; items: 选中项的数据 | 顶部确认按钮点击事件 |
onCancel | 底部取消按钮点击事件 | |
onConfirm | indexes: 选中项的下标; items: 选中项的数据 | 底部确认按钮点击事件 |
onChange | indexes: 选中项的下标; items: 选中项的数据 | 滚动切换事件 |
样式变量
| 名称 | 说明 |
|---|---|
--pure-picker-row-height | 行的高度 |