更新记录
1.0.0(2026-01-07)
下载此版本
master
平台兼容性
uni-app(4.13)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
- |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
安装
在市场导入xf-pk-multiple-selectuni_modules版本的即可,无需import
组件关联说明
代码演示
基本用法
<template>
<scroll-view class="xf-col-center" scroll-y>
<h3>单选</h3>
<view style="width: 100%;">
//用于表单
<xf-pk-multiple-select pickerTitle="表单标题" required :list="list" v-model="selectedList"
tip="副标题1" @confirm="confirm">
</xf-pk-multiple-select>
//插槽用法
<xf-pk-multiple-select :list="list" v-model="selectedList" v-model:show="show"
tip="副标题1" @confirm="confirm">
<template #content>
<xf-fm-multi-select title="表单多选可选" @click="show = true" v-model="selectedList"></xf-fm-multi-select>
</template>
</xf-pk-multiple-select>
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
const show = ref(false)
const selectedList = ref([])
const confirm = (e) => {
console.log(e)
}
const list = ref([
{
label: 'xxxx',
value: 1,
children:[
{ label: '好多好多字好多好多字',value: 1000,
children:[
{ label: '好多好多字好多好多字',value: 10001,},
{ label: '我的生活',value: 10002,},
{ label: 'xxxx',value: 10003,}
]
},
{ label: '我的生活',value: 1001,},
{ label: 'xxxx',value: 1002,}
]
},
{
label: '好多好多字好多好多字好多好多字好多好多字好多好多字',
value: 2
},
{
label: 'sssss',
value: 3
},
{
label: 'fffff',
value: 4
},
{
label: 'sdfadfsdf',
value: 5
},
{
label: 'fsdfsdf',
value: 6
},
{
label: 'sfadfsf',
value: 7
},
]);
</script>
<style scoped lang="scss">
view {
margin-top: 10px;
}
</style>
API
Props
| 属性名 |
说明 |
类型 |
默认值 |
| v-model:modelValue |
当前选中的列表item |
array |
- |
| v-model:show |
自定义插槽时,是否打开弹窗 |
boolean |
false |
| pickerTitle |
表单标题 |
string |
- |
| pickerBottomTip |
表单标题下面提示语 |
object|string |
- |
| pickerTip |
表单提示语 |
string |
- |
| title |
弹出层标题 |
string |
请选择 |
| tip |
弹出层副标题 |
string |
- |
| list |
展示的列表对象数据 |
array |
- |
| valueKey |
列表对象value值对应的key |
string |
value |
| labelKey |
列表对象label值对应的key |
string |
label |
| isReturnValue |
v-model 中 是否只返回 valueKey |
boolean |
false |
事件 Emits
| 事件名 |
说明 |
返回值 |
| confirm |
点击确认按钮事件 |
|
| close |
关闭事件 |
|
插槽 slot
| 名称 |
说明 |
返回值 |
| content |
当不是表单组件时,用于自定义 |
|