17 lines
1.4 KiB
Plaintext
17 lines
1.4 KiB
Plaintext
|
<template>
|
||
|
|
<view class="select-row" @click="choose"><text class="select-label">{{ label }}</text><text :class="modelValue.length > 0 ? 'select-value' : 'select-value select-placeholder'">{{ modelValue.length > 0 ? modelValue : '请选择' }}</text><view class="select-arrow"><AppIcon name="chevron-right" :size="28" /></view></view>
|
||
|
|
</template>
|
||
|
|
<script setup lang="uts">
|
||
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
||
|
|
const props = defineProps({ label: { type: String, default: '' }, modelValue: { type: String, default: '' }, options: { type: Array as PropType<string[]>, default: () => [] as string[] } })
|
||
|
|
const emit = defineEmits(['update:modelValue'])
|
||
|
|
const choose = () => { uni.showActionSheet({ itemList: props.options, success: (result) => { if (result.tapIndex >= 0 && result.tapIndex < props.options.length) emit('update:modelValue', props.options[result.tapIndex]) } }) }
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.select-row { min-height: 106rpx; flex-direction: row; align-items: center; border-bottom: 1rpx solid #edf1f6; }
|
||
|
|
.select-label { font-size: 28rpx; color: #29374e; margin-right: 16rpx; flex-shrink: 0; }
|
||
|
|
.select-value { flex: 1; min-width: 0; text-align: right; color: #22324a; font-size: 27rpx; line-height: 38rpx; }
|
||
|
|
.select-placeholder { color: #8995a7; }
|
||
|
|
.select-arrow { width: 32rpx; height: 32rpx; margin-left: 12rpx; align-items: center; justify-content: center; transform: rotate(90deg); }
|
||
|
|
</style>
|