You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<span v-if="type==='text'">{{optionValue}}</span>
|
|
<uni-tag v-else-if="values.includes(value)" :text="optionValue||''" :type="tagType" :inverted="true"></uni-tag>
|
|
<uni-tag v-else :text="value||''" :inverted="true"></uni-tag>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed
|
|
} from 'vue'
|
|
const props = defineProps({
|
|
options: Array,
|
|
value: Number | String | Array,
|
|
showValue: Boolean,
|
|
separator: String,
|
|
type: String,
|
|
})
|
|
|
|
const values = computed(() => {
|
|
if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
|
|
return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props
|
|
.separator || ',');
|
|
});
|
|
const optionValue = computed(() => {
|
|
let obj = (props.options || []).find(e => e.value === props.value)
|
|
return obj?.label || ''
|
|
});
|
|
const tagType = computed(() => {
|
|
let obj = (props.options || []).find(e => e.value === props.value)
|
|
if (obj) {
|
|
let type = obj.elTagType || ''
|
|
if (['primary', 'success', 'warning', 'error'].includes(type)) {
|
|
return type
|
|
} else {
|
|
if (type === 'info') {
|
|
return 'default'
|
|
} else {
|
|
return 'primary'
|
|
}
|
|
}
|
|
} else {
|
|
return 'primary'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
</style> |