56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<picker mode="selector" :range="range" :disabled="disableChange" @change="change($event)">
|
||
|
|
<common-cell :name="name" :required="required">
|
||
|
|
<view class="form-content__wrapper">
|
||
|
|
<view class="flex-main-content truncate" :class="value ? '' : 'form__placeholder'">
|
||
|
|
{{ value || placeholder }}
|
||
|
|
</view>
|
||
|
|
<uni-icons class="form-arrow" type="arrowright"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</common-cell>
|
||
|
|
</picker>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
import commonCell from '../common-cell.vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
range: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
required: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disableChange: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const placeholder = computed(() => `请输入${props.name || ''}`)
|
||
|
|
const value = computed(() => props.form && props.form && props.form[props.title] ? props.form[props.title] : '')
|
||
|
|
|
||
|
|
function change(e) {
|
||
|
|
emits('change', {
|
||
|
|
title: props.title,
|
||
|
|
value: props.range[e.detail.value]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
@import '../cell-style.css';
|
||
|
|
</style>
|