fix(drawer): 修改方向为右时全屏展示样式异常的问题

Author: lnzhangsong

devui/drawer/src/drawer.scss

@@ -5,7 +5,6 @@
  top: 0;
  left: 0;
  height: 100vh;
- width: 100vw;
 }
 
 .devui-overlay-wrapper {
@@ -15,34 +14,30 @@
  position: absolute;
  top: 0;
  bottom: 0;
+ width: 100vw;
 }
 
 .devui-overlay-backdrop {
- position: fixed;
+ position: absolute;
  top: 0;
  left: 0;
  background: $devui-shadow;
  width: 100vw;
  height: 100vh;
 }
 
-.devui-drawer-nav,
-.devui-drawer-content {
+.devui-drawer-nav {
  position: absolute;
  top: 0;
  bottom: 0;
- left: 0;
  border-radius: $devui-border-radius;
-}
-
-.devui-drawer-nav {
  background: $devui-base-bg;
 }
 
 .devui-drawer-content {
- left: 0;
- right: 0;
+ border-radius: $devui-border-radius;
  overflow: auto;
  box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
  padding: 20px;
+ height: 100vh;
 }

devui/drawer/src/drawer.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
  const isFullScreen = ref(false);
 
  const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value );
- const wrapperRight = computed(() => position.value === 'right' ? { 'right': width.value } : {} );
+ const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} );
 
  const fullScreenEvent = () => {
  isFullScreen.value = !isFullScreen.value;
@@ -50,7 +50,7 @@ export default defineComponent({
  visible,
  slots,
  isCover,
- wrapperRight,
+ navRight,
  fullScreenEvent,
  closeDrawer, 
  };
@@ -60,15 +60,15 @@ export default defineComponent({
  const fullScreenEvent: any = this.fullScreenEvent;
  const closeDrawer: any = this.closeDrawer;
  const isCover: boolean = this.isCover;
- const wrapperRight: Record<string, unknown> = this.wrapperRight;
+ const navRight: Record<string, unknown> = this.navRight;
 
  if (!this.visible) return;
 
  return (
  <div class="devui-drawer" style={{ zIndex: zindex }} onClick={ closeDrawer }>
  {isCover ? <div class="devui-overlay-backdrop"/>: ''}
- <div class="devui-overlay-wrapper" style={ wrapperRight }>
- <div class="devui-drawer-nav" style={{ 'width': this.navWidth }}>
+ <div class="devui-overlay-wrapper">
+ <div class="devui-drawer-nav" style={{ 'width': this.navWidth, ...navRight}}>
  <div class="devui-drawer-content">
  <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
  <div> { this.slots.default ? this.slots.default() : <DrawerContainer/>} </div>