52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="selector-field-row">
|
|
<el-input
|
|
:model-value="displayText"
|
|
readonly
|
|
:placeholder="placeholder"
|
|
style="flex:1"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
:disabled="disabled"
|
|
style="margin-left:8px"
|
|
@click="$emit('select')"
|
|
>{{ buttonText }}</el-button>
|
|
<el-button
|
|
v-if="clearable && modelValue"
|
|
style="margin-left:4px"
|
|
@click="$emit('update:modelValue', null); $emit('clear')"
|
|
>清除</el-button>
|
|
</div>
|
|
<div v-if="hint" :style="{ fontSize: '12px', color: hintType === 'disabled' ? '#c0c4cc' : '#909399', marginTop: '4px' }">
|
|
{{ hint }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: [Number, String, Object], default: null },
|
|
displayText: { type: String, default: '' },
|
|
placeholder: { type: String, default: '请选择' },
|
|
buttonText: { type: String, default: '选择' },
|
|
disabled: { type: Boolean, default: false },
|
|
clearable: { type: Boolean, default: true },
|
|
hint: { type: String, default: '' },
|
|
hintType: { type: String, default: 'normal' }
|
|
})
|
|
|
|
defineEmits(['select', 'clear', 'update:modelValue'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.selector-field-row {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
</style>
|