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.
67 lines
1.5 KiB
Vue
67 lines
1.5 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>
|
|
.card {
|
|
width: 630rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
margin-left: 30rpx;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 30rpx;
|
|
|
|
.title {
|
|
color: #333;
|
|
font-size: 32rpx
|
|
}
|
|
|
|
.content {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
</style> |