| 提交 | 用户 | 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 | }, | |
| 14 | item: { | |
| 15 | type: Object as PropType<MenuType>, | |
| 16 | default: null, | |
| 17 | }, | |
| 18 | showTitle: { | |
| 19 | type: Boolean as PropType<boolean>, | |
| 20 | default: true, | |
| 21 | }, | |
| 22 | level: { | |
| 23 | type: Number as PropType<number>, | |
| 24 | default: 0, | |
| 25 | }, | |
| 26 | }, | |
| 27 | setup(props) { | |
| 28 | /** | |
| 29 | * @description: 渲染图标 | |
| 30 | */ | |
| 31 | function renderIcon(icon: string) { | |
| 32 | return icon ? <Icon icon={icon} size={18} class="mr-1 menu-item-icon" /> : null; | |
| 33 | } | |
| 34 | ||
| 35 | return () => { | |
| 36 | if (!props.item) { | |
| 37 | return null; | |
| 38 | } | |
| 39 | const { showTitle, level } = props; | |
| 40 | const { name, icon } = props.item; | |
| 41 | const searchValue = props.searchValue || ''; | |
| 42 | const index = name.indexOf(searchValue); | |
| 43 | ||
| 44 | const beforeStr = name.substr(0, index); | |
| 45 | const afterStr = name.substr(index + searchValue.length); | |
| 46 | const show = level === 1 ? showTitle : true; | |
| 47 | return [ | |
| 48 | renderIcon(icon!), | |
| 49 | index > -1 && searchValue ? ( | |
| 50 | <span class={!show && 'hidden'}> | |
| 51 | {beforeStr} | |
| 52 | <span class={`basic-menu__keyword`}>{searchValue}</span> | |
| 53 | {afterStr} | |
| 54 | </span> | |
| 55 | ) : ( | |
| 56 | <span class={!show && 'hidden'}>{name}</span> | |
| 57 | ), | |
| 58 | ]; | |
| 59 | }; | |
| 60 | }, | |
| 61 | }); | |
