53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<picker mode="region" :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: ''
|
||
|
|
},
|
||
|
|
required: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disableChange: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const placeholder = computed(() => `请选择${props.name || ''}`)
|
||
|
|
const value = computed(() => props.form && Array.isArray(props.form[props.title]) ? props.form[props.title].join('-') : '')
|
||
|
|
|
||
|
|
function change(e) {
|
||
|
|
emits('change', {
|
||
|
|
value: e.detail.value,
|
||
|
|
title: props.title,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import '../cell-style.css'
|
||
|
|
</style>
|