| 提交 | 用户 | age | ||
| 2f6253 | 1 | import type { Menu as MenuType } from '/@/router/types'; |
| 陈 | 2 | import type { PropType } from 'vue'; |
| 3 | ||
| 4 | import { defineComponent } from 'vue'; | |
| 5 | import Icon from '/@/components/Icon/index'; | |
| 6 | ||
| 7 | export default defineComponent({ | |
| 8 | name: 'MenuContent', | |
| 9 | props: { | |
| 10 | searchValue: { | |
| 11 | type: String as PropType<string>, | |
| 12 | default: '', | |
| 13 | }, | |
| 96c10d | 14 | |
| 2f6253 | 15 | item: { |
| 陈 | 16 | type: Object as PropType<MenuType>, |
| 17 | default: null, | |
| 18 | }, | |
| 96c10d | 19 | |
| 2f6253 | 20 | showTitle: { |
| 陈 | 21 | type: Boolean as PropType<boolean>, |
| 22 | default: true, | |
| 23 | }, | |
| 96c10d | 24 | |
| 2f6253 | 25 | level: { |
| 陈 | 26 | type: Number as PropType<number>, |
| 27 | default: 0, | |
| 28 | }, | |
| 29 | }, | |
| 30 | setup(props) { | |
| 31 | /** | |
| 32 | * @description: 渲染图标 | |
| 33 | */ | |
| 34 | function renderIcon(icon: string) { | |
| 4f6b65 | 35 | return icon ? <Icon icon={icon} size={18} class="menu-item-icon" /> : null; |
| 2f6253 | 36 | } |
| 陈 | 37 | |
| a3887f | 38 | function renderTag() { |
| V | 39 | const { item, showTitle } = props; |
| 40 | if (!item || showTitle) return null; | |
| 41 | ||
| 42 | const { tag } = item; | |
| 43 | if (!tag) return null; | |
| 44 | ||
| 45 | const { dot, content, type = 'error' } = tag; | |
| 46 | if (!dot && !content) return null; | |
| 47 | const cls = ['basic-menu__tag']; | |
| 48 | ||
| 49 | dot && cls.push('dot'); | |
| 50 | type && cls.push(type); | |
| 51 | ||
| 52 | return <span class={cls}>{dot ? '' : content}</span>; | |
| 53 | } | |
| 54 | ||
| 2f6253 | 55 | return () => { |
| 陈 | 56 | if (!props.item) { |
| 57 | return null; | |
| 58 | } | |
| 96c10d | 59 | const { showTitle } = props; |
| 2f6253 | 60 | const { name, icon } = props.item; |
| 陈 | 61 | const searchValue = props.searchValue || ''; |
| 62 | const index = name.indexOf(searchValue); | |
| 63 | ||
| 64 | const beforeStr = name.substr(0, index); | |
| 65 | const afterStr = name.substr(index + searchValue.length); | |
| a3887f | 66 | const cls = showTitle ? 'show-title' : 'basic-menu__name'; |
| 96c10d | 67 | return ( |
| V | 68 | <> |
| 69 | {renderIcon(icon!)} | |
| 70 | {index > -1 && searchValue ? ( | |
| a3887f | 71 | <span class={cls}> |
| 96c10d | 72 | {beforeStr} |
| V | 73 | <span class={`basic-menu__keyword`}>{searchValue}</span> |
| 74 | {afterStr} | |
| 75 | </span> | |
| 76 | ) : ( | |
| a3887f | 77 | <span class={[cls]}> |
| V | 78 | {name} |
| 79 | {renderTag()} | |
| 80 | </span> | |
| 96c10d | 81 | )} |
| V | 82 | </> |
| 83 | ); | |
| 2f6253 | 84 | }; |
| 陈 | 85 | }, |
| 86 | }); | |
