| 提交 | 用户 | age | ||
| ff2b12 | 1 | <template> |
| V | 2 | <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span> |
| 3 | </template> | |
| 4 | <script lang="ts"> | |
| 5 | import type { Menu } from '/@/router/types'; | |
| 6 | ||
| 7 | import { defineComponent, computed } from 'vue'; | |
| 8 | ||
| 9 | import { useDesign } from '/@/hooks/web/useDesign'; | |
| d5d4c4 | 10 | import { propTypes } from '/@/utils/propTypes'; |
| ff2b12 | 11 | |
| V | 12 | export default defineComponent({ |
| 13 | name: 'SimpleMenuTag', | |
| 14 | props: { | |
| 15 | item: { | |
| 16 | type: Object as PropType<Menu>, | |
| 17 | default: {}, | |
| 18 | }, | |
| d5d4c4 | 19 | dot: propTypes.bool, |
| V | 20 | collapseParent: propTypes.bool, |
| ff2b12 | 21 | }, |
| V | 22 | setup(props) { |
| 23 | const { prefixCls } = useDesign('simple-menu'); | |
| 24 | ||
| 25 | const getShowTag = computed(() => { | |
| 26 | const { item } = props; | |
| 27 | ||
| 28 | if (!item) return false; | |
| 29 | ||
| 30 | const { tag } = item; | |
| 31 | if (!tag) return false; | |
| 32 | ||
| 33 | const { dot, content } = tag; | |
| 34 | if (!dot && !content) return false; | |
| 35 | return true; | |
| 36 | }); | |
| 37 | ||
| 38 | const getContent = computed(() => { | |
| 39 | if (!getShowTag.value) return ''; | |
| 40 | const { item, collapseParent } = props; | |
| 41 | const { tag } = item; | |
| 42 | const { dot, content } = tag!; | |
| 43 | return dot || collapseParent ? '' : content; | |
| 44 | }); | |
| 45 | ||
| 46 | const getTagClass = computed(() => { | |
| 47 | const { item, collapseParent } = props; | |
| 48 | const { tag = {} } = item || {}; | |
| 49 | const { dot, type = 'error' } = tag; | |
| 50 | const tagCls = `${prefixCls}-tag`; | |
| 51 | return [ | |
| 52 | tagCls, | |
| 53 | ||
| 54 | [`${tagCls}--${type}`], | |
| 55 | { | |
| 56 | [`${tagCls}--collapse`]: collapseParent, | |
| d5d4c4 | 57 | [`${tagCls}--dot`]: dot || props.dot, |
| ff2b12 | 58 | }, |
| V | 59 | ]; |
| 60 | }); | |
| 61 | return { | |
| 62 | getTagClass, | |
| 63 | getShowTag, | |
| 64 | getContent, | |
| 65 | }; | |
| 66 | }, | |
| 67 | }); | |
| 68 | </script> | |
