feat: 优化dict tag 颜色
parent
2f284d31c3
commit
2111e14e31
|
@ -19,7 +19,8 @@ export default defineComponent({
|
|||
type: String as PropType<string>,
|
||||
required: false,
|
||||
default: () => 'number'
|
||||
}
|
||||
},
|
||||
icon: { type: String }
|
||||
},
|
||||
setup(props) {
|
||||
const dictData = ref<DictDataType>()
|
||||
|
@ -34,8 +35,8 @@ export default defineComponent({
|
|||
}
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
if (dict.value === value) {
|
||||
if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
|
||||
dict.colorType = ''
|
||||
if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'info') {
|
||||
dict.colorType = 'processing'
|
||||
}
|
||||
dictData.value = dict
|
||||
}
|
||||
|
@ -50,9 +51,17 @@ export default defineComponent({
|
|||
return null
|
||||
}
|
||||
getDictObj(props.type, props.value.toString())
|
||||
// 添加标签的文字颜色为白色,解决自定义背景颜色时标签文字看不清的问题
|
||||
// 添加标签的文字颜色为白色,解决自定义背景颜色时标签文字看不清的问题 && isHexColor(dictData.value?.cssClass)
|
||||
return (
|
||||
<Tag color={dictData.value?.cssClass && isHexColor(dictData.value?.cssClass) ? dictData.value?.cssClass : ''}>
|
||||
<Tag
|
||||
color={
|
||||
dictData.value?.colorType
|
||||
? dictData.value?.colorType
|
||||
: dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
|
||||
? dictData.value?.cssClass
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{dictData.value?.label}
|
||||
</Tag>
|
||||
)
|
||||
|
|
|
@ -121,11 +121,11 @@ export const dataFormSchema: FormSchema[] = [
|
|||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
value: 'default',
|
||||
label: '默认'
|
||||
value: '',
|
||||
label: '空'
|
||||
},
|
||||
{
|
||||
value: 'primary',
|
||||
value: 'processing',
|
||||
label: '主要'
|
||||
},
|
||||
{
|
||||
|
@ -133,16 +133,44 @@ export const dataFormSchema: FormSchema[] = [
|
|||
label: '成功'
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: '信息'
|
||||
value: 'default',
|
||||
label: '默认'
|
||||
},
|
||||
{
|
||||
value: 'warning',
|
||||
label: '警告'
|
||||
},
|
||||
{
|
||||
value: 'danger',
|
||||
value: 'error',
|
||||
label: '危险'
|
||||
},
|
||||
{
|
||||
value: 'pink',
|
||||
label: 'pink'
|
||||
},
|
||||
{
|
||||
value: 'red',
|
||||
label: 'red'
|
||||
},
|
||||
{
|
||||
value: 'orange',
|
||||
label: 'orange'
|
||||
},
|
||||
{
|
||||
value: 'green',
|
||||
label: 'green'
|
||||
},
|
||||
{
|
||||
value: 'cyan',
|
||||
label: 'cyan'
|
||||
},
|
||||
{
|
||||
value: 'blue',
|
||||
label: 'blue'
|
||||
},
|
||||
{
|
||||
value: 'purple',
|
||||
label: 'purple'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -150,7 +178,8 @@ export const dataFormSchema: FormSchema[] = [
|
|||
{
|
||||
label: 'CSS Class',
|
||||
field: 'cssClass',
|
||||
component: 'Input'
|
||||
component: 'Input',
|
||||
helpMessage: '输入hex模式的颜色,例如#108ee9'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
|
|
Loading…
Reference in New Issue