52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title font-bold"> <text v-if="required" style="color: red;">*</text>{{title}}</view>
|
|
<picker @change="change" range-key="name" :value="value" :range="list">
|
|
<view class="u-m-t-16 u-flex u-row-between ">
|
|
<view class="color-333" v-if="selText">{{selText}}</view>
|
|
<view class="color-999" v-else>请选择</view>
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue';
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
},
|
|
required: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
const index = ref(props.modelValue)
|
|
const emits = defineEmits(['update:modelValue'], )
|
|
const selText = computed(() => {
|
|
const item = props.list.filter(ele => ele.value == props.modelValue)[0]
|
|
if(!item){
|
|
return ''
|
|
}
|
|
return item.name
|
|
})
|
|
|
|
watch(() => index.value, (newval) => {
|
|
emits('update:modelValue', props.list[newval].value)
|
|
})
|
|
|
|
function change(e) {
|
|
index.value = e.detail.value
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |