13 changed files with 494 additions and 144 deletions
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<view class="single-picker"> |
|||
<fui-picker |
|||
:layer="1" |
|||
:options="formattedOptions" |
|||
:show="show" |
|||
@change="onChange" |
|||
@cancel="onCancel" |
|||
:title="title" |
|||
></fui-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 通用单选选择器组件 |
|||
* @description 基于FirstUI的fui-picker组件封装的通用单选选择器，支持灵活配置 |
|||
*/ |
|||
export default { |
|||
name: "single-picker", |
|||
props: { |
|||
/** |
|||
* 是否显示选择器 |
|||
* @property {Boolean} show - 控制选择器的显示与隐藏 |
|||
* @default false |
|||
*/ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
/** |
|||
* 数据源 |
|||
* @property {Array} data - 选择器数据数组 |
|||
* @default [] |
|||
*/ |
|||
data: { |
|||
type: Array, |
|||
default() { |
|||
return [] |
|||
}, |
|||
validator(value) { |
|||
// 允许空数组或非空数组 |
|||
return Array.isArray(value) |
|||
} |
|||
}, |
|||
/** |
|||
* 值字段名 |
|||
* @property {String} valueKey - 用作选项值的字段名 |
|||
* @default 'value' |
|||
*/ |
|||
valueKey: { |
|||
type: String, |
|||
default: 'value' |
|||
}, |
|||
/** |
|||
* 文本字段名 |
|||
* @property {String|Array} textKey - 用作显示文本的字段名，支持字符串或数组 |
|||
* @default 'text' |
|||
*/ |
|||
textKey: { |
|||
type: [String, Array], |
|||
default: 'text' |
|||
}, |
|||
/** |
|||
* 文本分隔符 |
|||
* @property {String} textSeparator - 当textKey为数组时，各字段之间的分隔符 |
|||
* @default '-' |
|||
*/ |
|||
textSeparator: { |
|||
type: String, |
|||
default: '-' |
|||
}, |
|||
/** |
|||
* 选择器标题 |
|||
* @property {String} title - 选择器顶部显示的标题 |
|||
* @default '请选择' |
|||
*/ |
|||
title: { |
|||
type: String, |
|||
default: '请选择' |
|||
}, |
|||
/** |
|||
* 默认占位文本 |
|||
* @property {String} placeholder - 当字段为空时显示的占位文本 |
|||
* @default '未命名' |
|||
*/ |
|||
placeholder: { |
|||
type: String, |
|||
default: '未命名' |
|||
} |
|||
}, |
|||
computed: { |
|||
/** |
|||
* 格式化后的选项数据，适配fui-picker组件 |
|||
*/ |
|||
formattedOptions() { |
|||
// 确保data是数组且不为空 |
|||
if (!this.data || !Array.isArray(this.data) || this.data.length === 0) { |
|||
return [] |
|||
} |
|||
|
|||
return this.data.map(item => { |
|||
return this.getDisplayText(item) |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 获取显示文本 |
|||
* @param {Object} item - 数据项 |
|||
* @returns {String} 显示文本 |
|||
*/ |
|||
getDisplayText(item) { |
|||
if (!item || typeof item !== 'object') { |
|||
return this.placeholder |
|||
} |
|||
|
|||
if (Array.isArray(this.textKey)) { |
|||
// 如果textKey是数组，组合多个字段 |
|||
const textParts = this.textKey.map(key => { |
|||
return item[key] || this.placeholder |
|||
}) |
|||
return textParts.join(this.textSeparator) |
|||
} else { |
|||
// 如果textKey是字符串，直接取对应字段 |
|||
return item[this.textKey] || this.placeholder |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 获取选项值 |
|||
* @param {Object} item - 数据项 |
|||
* @returns {*} 选项值 |
|||
*/ |
|||
getDisplayValue(item) { |
|||
if (!item || typeof item !== 'object') { |
|||
return null |
|||
} |
|||
return item[this.valueKey] |
|||
}, |
|||
|
|||
/** |
|||
* 选择器确认事件处理 |
|||
* @param {Object} e - 选择器返回的数据对象 |
|||
* @emits update:show - 更新show属性 |
|||
* @emits change - 选择完成事件 |
|||
*/ |
|||
onChange(e) { |
|||
// 隐藏选择器 |
|||
this.$emit('update:show', false) |
|||
|
|||
// 获取选中的索引 |
|||
const index = e.index && e.index[0] |
|||
|
|||
// 如果没有选中任何项或没有数据，返回 |
|||
if (index === undefined || !this.data || !Array.isArray(this.data) || this.data.length === 0 || index >= this.data.length) { |
|||
return |
|||
} |
|||
|
|||
// 获取选中的数据项 |
|||
const selectedItem = this.data[index] |
|||
|
|||
// 如果选中的项不存在，返回 |
|||
if (!selectedItem) { |
|||
return |
|||
} |
|||
|
|||
// 将选择结果传递给父组件 |
|||
this.$emit('change', { |
|||
text: this.getDisplayText(selectedItem), |
|||
value: this.getDisplayValue(selectedItem), |
|||
index: index, |
|||
item: selectedItem |
|||
}) |
|||
}, |
|||
/** |
|||
* 选择器取消事件处理 |
|||
* @emits update:show - 更新show属性 |
|||
* @emits cancel - 取消选择事件 |
|||
*/ |
|||
onCancel() { |
|||
// 隐藏选择器 |
|||
this.$emit('update:show', false) |
|||
// 通知父组件取消选择 |
|||
this.$emit('cancel') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.single-picker { |
|||
/* 可以根据需要添加自定义样式 */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue