From bf4a8543ca9f4e9ef6d13f78385f5c0f30255dc0 Mon Sep 17 00:00:00 2001 From: LiuHao <liuhaoai545@gmail.com> Date: 星期六, 06 五月 2023 09:25:05 +0800 Subject: [PATCH] Merge branch 'ts' into dev --- src/components/DictTag/index.vue | 90 ++++++++++++++++++++++++++++++++++---------- 1 files changed, 69 insertions(+), 21 deletions(-) diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue index 827a7af..f27b16a 100644 --- a/src/components/DictTag/index.vue +++ b/src/components/DictTag/index.vue @@ -2,13 +2,9 @@ <div> <template v-for="(item, index) in options"> <template v-if="values.includes(item.value)"> - <span - v-if="item.elTagType == 'default' || item.elTagType == ''" - :key="item.value" - :index="index" - :class="item.elTagClass" - >{{ item.label }}</span - > + <span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="item.value" :index="index" :class="item.elTagClass"> + {{ item.label + " " }} + </span> <el-tag v-else :disable-transitions="true" @@ -16,9 +12,13 @@ :index="index" :type="item.elTagType === 'primary' ? '' : item.elTagType" :class="item.elTagClass" - >{{ item.label }}</el-tag > + {{ item.label + " " }} + </el-tag> </template> + </template> + <template v-if="unmatch && showValue"> + {{ unmatchArray }} </template> </div> </template> @@ -26,23 +26,71 @@ <script setup lang="ts"> import { PropType } from 'vue'; + const props = defineProps({ - // 鏁版嵁 - options: { - type: Array as PropType<DictDataOption[]>, - default: null, - }, - // 褰撳墠鐨勫�� - value: [Number, String, Array], -}) + // 鏁版嵁 + options: { + type: Array as PropType<DictDataOption[]>, + default: null, + }, + // 褰撳墠鐨勫�� + value: [Number, String, Array] as PropType<number | string | Array<number | string>>, + // 褰撴湭鎵惧埌鍖归厤鐨勬暟鎹椂锛屾樉绀簐alue + showValue: { + type: Boolean as PropType<boolean>, + default: true, + }, +}); const values = computed(() => { - if (props.value !== null && typeof props.value !== 'undefined') { - return Array.isArray(props.value) ? props.value : [String(props.value)]; - } else { - return []; + if (props.value !== null && typeof props.value !== "undefined") { + return Array.isArray(props.value) ? props.value : [String(props.value)]; + } else { + return []; + } +}); + +const unmatch = computed(() => { + if (props.value !== null && typeof props.value !== "undefined") { + // 浼犲叆鍊间负闈炴暟缁� + if (!Array.isArray(props.value)) { + if (props.options.some((v) => v.value == props.value)) { + return false; + } + return true; } -}) + return true; + } + // 娌℃湁value涓嶆樉绀� + return false; +}); + +const unmatchArray = computed(() => { +// 璁板綍鏈尮閰嶇殑椤� + const itemUnmatchArray: Array<string | number> = []; + if (props.value !== null && typeof props.value !== "undefined") { + // 浼犲叆鍊间负闈炴暟缁� + if (!Array.isArray(props.value)) { + itemUnmatchArray.push(props.value); + } else { + // 浼犲叆鍊间负Array + props.value.forEach((item) => { + if (!props.options.some((v) => v.value == item)) { + itemUnmatchArray.push(item); + } + }); + } + } + // 娌℃湁value涓嶆樉绀� + return handleArray(itemUnmatchArray); +}); + +const handleArray = (array: Array<string | number>) => { + if (array.length === 0) return ""; + return array.reduce((pre, cur) => { + return pre + " " + cur; + }); +} </script> <style scoped> -- Gitblit v1.9.3