From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DictTag/src/DictTag.vue | 90 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 90 insertions(+), 0 deletions(-)
diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
new file mode 100644
index 0000000..6414eaa
--- /dev/null
+++ b/src/components/DictTag/src/DictTag.vue
@@ -0,0 +1,90 @@
+<script lang="tsx">
+import { computed, defineComponent, PropType } from 'vue'
+import { isHexColor } from '@/utils/color'
+import { ElTag } from 'element-plus'
+import { DictDataType, getDictOptions } from '@/utils/dict'
+import { isArray, isBoolean, isNumber, isString } from '@/utils/is'
+
+export default defineComponent({
+ name: 'DictTag',
+ props: {
+ type: {
+ type: String as PropType<string>,
+ required: true
+ },
+ value: {
+ type: [String, Number, Boolean, Array],
+ required: true
+ },
+ // 瀛楃涓插垎闅旂 鍙湁褰� props.value 浼犲叆鍊间负瀛楃涓叉椂鏈夋晥
+ separator: {
+ type: String as PropType<string>,
+ default: ','
+ },
+ // 姣忎釜 tag 涔嬮棿鐨勯棿闅旓紝榛樿涓� 5px锛屽弬鑰冪殑 el-row 鐨� gutter
+ gutter: {
+ type: String as PropType<string>,
+ default: '5px'
+ }
+ },
+ setup(props) {
+ const valueArr: any = computed(() => {
+ // 1. 鏄� Number 绫诲瀷鍜� Boolean 绫诲瀷鐨勬儏鍐�
+ if (isNumber(props.value) || isBoolean(props.value)) {
+ return [String(props.value)]
+ }
+ // 2. 鏄瓧绗︿覆锛堣繘涓�姝ュ垽鏂槸鍚︽湁鍖呭惈鍒嗛殧绗﹀彿 -> props.sepSymbol 锛�
+ else if (isString(props.value)) {
+ return props.value.split(props.separator)
+ }
+ // 3. 鏁扮粍
+ else if (isArray(props.value)) {
+ return props.value.map(String)
+ }
+ return []
+ })
+ const renderDictTag = () => {
+ if (!props.type) {
+ return null
+ }
+ // 瑙ｅ喅鑷畾涔夊瓧鍏告爣绛惧�间负闆舵椂鏍囩涓嶆覆鏌撶殑闂
+ if (props.value === undefined || props.value === null || props.value === '') {
+ return null
+ }
+ const dictOptions = getDictOptions(props.type)
+
+ return (
+ <div
+ class="dict-tag"
+ style={{
+ display: 'inline-flex',
+ gap: props.gutter,
+ justifyContent: 'center',
+ alignItems: 'center'
+ }}
+ >
+ {dictOptions.map((dict: DictDataType) => {
+ if (valueArr.value.includes(dict.value)) {
+ if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+ dict.colorType = ''
+ }
+ return (
+ // 娣诲姞鏍囩鐨勬枃瀛楅鑹蹭负鐧借壊锛岃В鍐宠嚜瀹氫箟鑳屾櫙棰滆壊鏃舵爣绛炬枃瀛楃湅涓嶆竻鐨勯棶棰�
+ <ElTag
+ style={dict?.cssClass ? 'color: #fff' : ''}
+ type={dict?.colorType || null}
+ color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
+ disableTransitions={true}
+ >
+ {dict?.label}
+ </ElTag>
+ )
+ }
+ })}
+ </div>
+ )
+ }
+ return () => renderDictTag()
+ }
+})
+</script>
--
Gitblit v1.8.0