feat: add useDesign

vben

2020-12-07 74e62cbc712bdd4d4826e5fe80f537d87e44ffce

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