perf(modal-drawer): replace the scrollbar assembly

CHANGELOG.zh_CN.md

@@ -12,6 +12,10 @@
 - form: 新增远程下拉`ApiSelect`及示例
 - form: 新增`autoFocusFirstItem`配置。用于配置是否聚焦表单第一个输入框
 
+### ⚡ Performance Improvements
+
+- 优化`modal`与`drawer`滚动条组件
+
 ### 🐛 Bug Fixes
 
 - 修复混合模式下滚动条丢失问题
@@ -21,6 +25,7 @@
 - 修复路由类型错误
 - 修复菜单分割时权限失效问题
 - 关闭多标签页时 iframe 提前加载
+- 修复`modal`与`drawer`已知问题
 
 ## 2.0.0-rc.14 (2020-12-15)
 

src/components/Container/src/LazyContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <transition-group
-    class="lazy-container"
+    :class="prefixCls"
     v-bind="$attrs"
     ref="elRef"
     :name="transitionName"
@@ -25,6 +25,7 @@
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   interface State {
     isInit: boolean;
@@ -70,6 +71,8 @@
         intersectionObserverInstance: null,
       });
 
+      const { prefixCls } = useDesign('lazy-container');
+
       onMounted(() => {
         immediateInit();
         initIntersectionObserver();
@@ -129,13 +132,17 @@
       }
       return {
         elRef,
+        prefixCls,
         ...toRefs(state),
       };
     },
   });
 </script>
 <style lang="less">
-  .lazy-container {
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-lazy-container';
+
+  .@{prefix-cls} {
     width: 100%;
     height: 100%;
   }

src/components/Container/src/collapse/CollapseContainer.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="collapse-container p-2">
-    <CollapseHeader v-bind="$props" :show="show" @expand="handleExpand">
+  <div :class="['p-2', prefixCls]">
+    <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
       <template #title>
         <slot name="title" />
       </template>
     </CollapseHeader>
 
     <CollapseTransition :enable="canExpan">
       <Skeleton v-if="loading" />
-      <div class="collapse-container__body" v-else v-show="show">
+      <div :class="`${prefixCls}__body`" v-else v-show="show">
         <LazyContainer :timeout="lazyTime" v-if="lazy">
           <slot />
           <template #skeleton>
@@ -35,6 +35,7 @@
   // hook
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'CollapseContainer',
@@ -64,6 +65,9 @@
     },
     setup(props) {
       const show = ref(true);
+
+      const { prefixCls } = useDesign('collapse-container');
+
       /**
        * @description: Handling development events
        */
@@ -77,20 +81,20 @@
       return {
         show,
         handleExpand,
+        prefixCls,
       };
     },
   });
 </script>
 <style lang="less">
-  .collapse-container {
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-collapse-container';
+
+  .@{prefix-cls} {
     background: #fff;
     border-radius: 2px;
     transition: all 0.3s ease-in-out;
 
-    &.no-shadow {
-      box-shadow: none;
-    }
-
     &__header {
       display: flex;
       height: 32px;

src/components/Container/src/collapse/CollapseHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse-container__header">
+  <div :class="`${prefixCls}__header`">
     <BasicTitle :helpMessage="$attrs.helpMessage">
       <template v-if="$attrs.title">
         {{ $attrs.title }}
@@ -9,7 +9,7 @@
       </template>
     </BasicTitle>
 
-    <div class="collapse-container__action">
+    <div :class="`${prefixCls}__action`">
       <slot name="action" />
       <BasicArrow v-if="$attrs.canExpan" top :expand="$attrs.show" @click="$emit('expand')" />
     </div>
@@ -21,5 +21,8 @@
   export default defineComponent({
     inheritAttrs: false,
     components: { BasicArrow, BasicTitle },
+    props: {
+      prefixCls: String,
+    },
   });
 </script>

src/components/Description/src/index.tsx

@@ -24,7 +24,7 @@ export default defineComponent({
     const getMergeProps = computed(() => {
       return {
         ...props,
-        ...(unref(propsRef) as any),
+        ...(unref(propsRef) as Recordable),
       } as DescOptions;
     });
 

src/components/Description/src/props.ts

@@ -13,7 +13,7 @@ export default {
   bordered: propTypes.bool.def(true),
 
   column: {
-    type: [Number, Object] as PropType<number | any>,
+    type: [Number, Object] as PropType<number | Recordable>,
     default: () => {
       return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
     },

src/components/Description/src/types.ts

@@ -15,7 +15,10 @@ export interface DescItem {
   span?: number;
   show?: (...arg: any) => boolean;
   // render
-  render?: (val: string, data: any) => VNode | undefined | JSX.Element | Element | string | number;
+  render?: (
+    val: string,
+    data: Recordable
+  ) => VNode | undefined | JSX.Element | Element | string | number;
 }
 
 export interface DescOptions extends DescriptionsProps {
@@ -30,7 +33,7 @@ export interface DescOptions extends DescriptionsProps {
    * 数据
    * @type object
    */
-  data: any;
+  data: Recordable;
   /**
    * Built-in CollapseContainer component configuration
    * @type CollapseContainerOptions

src/components/Description/src/useDescription.ts

@@ -19,7 +19,7 @@ export function useDescription(props?: Partial<DescOptions>): UseDescReturnType
 
   const methods: DescInstance = {
     setDescProps: (descProps: Partial<DescOptions>): void => {
-      unref(descRef)!.setDescProps(descProps);
+      unref(descRef)?.setDescProps(descProps);
     },
   };
 

src/components/Drawer/index.ts

@@ -1,6 +1,6 @@
 import { withInstall } from '../util';
 
-import BasicDrawer from './src/BasicDrawer';
+import BasicDrawer from './src/BasicDrawer.vue';
 
 export { BasicDrawer };
 export * from './src/types';