97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<picker
|
||
|
|
:range="pickerList"
|
||
|
|
:range-key="props?.key || 'text'"
|
||
|
|
@change="onChange"
|
||
|
|
:disabled="props?.disabled"
|
||
|
|
>
|
||
|
|
<view class="cell_content" :style="{
|
||
|
|
borderTop: props.borderTop ? '1rpx solid #eee' : '',
|
||
|
|
padding: props?.padding || '10rpx 0'
|
||
|
|
}">
|
||
|
|
<view class="title">
|
||
|
|
{{ props?.title || '标题' }}
|
||
|
|
<text v-if="required"> * </text>
|
||
|
|
</view>
|
||
|
|
<view :class="valueEd?'valueStyle':'valueStyle placeholderStyle'">
|
||
|
|
{{ valueEd || placeholder }} <uni-icons type="right" size="15" color="#999"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref, watch } from 'vue'
|
||
|
|
|
||
|
|
interface EnumItem {
|
||
|
|
text?: string
|
||
|
|
value?: string
|
||
|
|
type?: string
|
||
|
|
}
|
||
|
|
const props = defineProps([
|
||
|
|
'Enums',
|
||
|
|
'title',
|
||
|
|
'pickerIndex',
|
||
|
|
'value',
|
||
|
|
'borderTop',
|
||
|
|
'required',
|
||
|
|
'tip',
|
||
|
|
'key',
|
||
|
|
'des',
|
||
|
|
'padding',
|
||
|
|
'valueModel',
|
||
|
|
'disabled'
|
||
|
|
])
|
||
|
|
const placeholder = '请选择'
|
||
|
|
const valueEd = ref('')
|
||
|
|
const pickerList = ref<any>([])
|
||
|
|
const emit = defineEmits(['change', 'update:valueModel'])
|
||
|
|
const onChange = (e: any) => {
|
||
|
|
let selectData: any = pickerList.value[e?.detail.value]
|
||
|
|
valueEd.value = selectData?.text
|
||
|
|
emit('update:valueModel', selectData?.value)
|
||
|
|
emit('change', selectData)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getEnums = (): any => {
|
||
|
|
let list: EnumItem[] = Object.entries(props?.Enums as Record<string, EnumItem>).map(
|
||
|
|
([key, value]) => ({
|
||
|
|
text: value.text,
|
||
|
|
value: value.value,
|
||
|
|
type: value?.type || ''
|
||
|
|
})
|
||
|
|
)
|
||
|
|
pickerList.value = list
|
||
|
|
}
|
||
|
|
watch(
|
||
|
|
() => props?.Enums,
|
||
|
|
() => {
|
||
|
|
getEnums()
|
||
|
|
}
|
||
|
|
)
|
||
|
|
onMounted(() => {
|
||
|
|
getEnums()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cell_content{
|
||
|
|
padding: 10rpx 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.title {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 29rpx;
|
||
|
|
padding: 16rpx 0;
|
||
|
|
text {
|
||
|
|
color: #f00;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.valueStyle{
|
||
|
|
font-size:28rpx;
|
||
|
|
}
|
||
|
|
.placeholderStyle{
|
||
|
|
color:#ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|