perf: perf menu

vbenjs · Dec 7, 2020 · 88f4a3f · 88f4a3f
1 parent 74e62cb
commit 88f4a3f
Show file tree

Hide file tree

Showing 24 changed files with 557 additions and 579 deletions.
diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
@@ -8,10 +8,10 @@
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
     @menuEvent="handleMenuEvent"
-    overlayClassName="app-locale-picker-overlay"
+    :overlayClassName="`${prefixCls}-overlay`"
   >
-    <span class="app-local-picker">
-      <GlobalOutlined class="app-local-picker__icon" />
+    <span :class="prefixCls">
+      <GlobalOutlined :class="`${prefixCls}__icon`" />
       <span v-if="showText">{{ getLangText }}</span>
     </span>
   </Dropdown>
@@ -28,6 +28,7 @@
   import { LocaleType } from '/@/locales/types';
 
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'AppLocalPicker',
@@ -39,9 +40,12 @@
       reload: propTypes.bool,
     },
     setup(props) {
-      const { localeList } = useLocaleSetting();
       const selectedKeys = ref<string[]>([]);
 
+      const { prefixCls } = useDesign('app-locale-picker');
+
+      const { localeList } = useLocaleSetting();
+
       const { changeLocale, getLang } = useLocale();
 
       const getLangText = computed(() => {
@@ -64,19 +68,22 @@
         toggleLocale(menu.event as string);
       }
 
-      return { localeList, handleMenuEvent, selectedKeys, getLangText };
+      return { localeList, handleMenuEvent, selectedKeys, getLangText, prefixCls };
     },
   });
 </script>
 
 <style lang="less" scoped>
-  :global(.app-locale-picker-overlay) {
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-app-locale-picker';
+
+  :global(.@{prefix-cls}-overlay) {
     .ant-dropdown-menu-item {
       min-width: 160px;
     }
   }
 
-  .app-local-picker {
+  .@{prefix-cls} {
     display: flex;
     align-items: center;
     cursor: pointer;

diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
@@ -20,15 +20,17 @@
       expand: propTypes.bool,
       top: propTypes.bool,
       bottom: propTypes.bool,
+      inset: propTypes.bool,
     },
     setup(props) {
       const getClass = computed(() => {
-        const { expand, top, bottom } = props;
+        const { expand, top, bottom, inset } = props;
         return [
           'base-arrow',
           {
             'base-arrow__active': expand,
             top,
+            inset,
             bottom,
           },
         ];
@@ -47,6 +49,10 @@
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
 
+    &.inset {
+      line-height: 0px;
+    }
+
     &__active {
       transform: rotate(90deg);
     }