feat(drawer): 增加基本组件的弹出方向属性和点击任意位置关闭

Author: lnzhangsong

devui/drawer/src/components/drawer-header.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, reactive } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type';
 
 import './drawer-header.scss'
@@ -10,7 +10,8 @@ export default defineComponent({
  setup(props: DrawerHeaderType, ctx) {
  const isFullScreen = ref<boolean>(false);
 
- const handleFullScreen = () => {
+ const handleFullScreen = (e) => {
+ e.stopPropagation();
  isFullScreen.value = !isFullScreen.value;
  ctx.emit('toggleFullScreen');
  }

devui/drawer/src/drawer-types.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 export const drawerProps = {
  width: {
@@ -21,6 +21,10 @@ export const drawerProps = {
  type: Boolean,
  default: true,
  },
+ position: {
+ type: String as PropType<'left' | 'right'>,
+ default: 'left',
+ },
 } as const
 
 export type DrawerProps = ExtractPropTypes<typeof drawerProps>

devui/drawer/src/drawer.scss

@@ -5,6 +5,7 @@
  top: 0;
  left: 0;
  height: 100vh;
+ width: 100vw;
 }
 
 .devui-overlay-wrapper {
@@ -17,7 +18,7 @@
 }
 
 .devui-overlay-backdrop {
- position: absolute;
+ position: fixed;
  top: 0;
  left: 0;
  background: $devui-shadow;
@@ -30,6 +31,7 @@
  position: absolute;
  top: 0;
  bottom: 0;
+ left: 0;
  border-radius: $devui-border-radius;
 }
 

devui/drawer/src/drawer.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs, watch } from 'vue'
+import { defineComponent, ref, toRefs, watch, computed } from 'vue'
 import { drawerProps, DrawerProps } from './drawer-types'
 
 import DrawerHeader from './components/drawer-header'
@@ -11,9 +11,12 @@ export default defineComponent({
  props: drawerProps,
  emits: ['close', 'update:visible', 'afterOpened'],
  setup(props: DrawerProps, { emit, slots }) {
- const { width, visible, zIndex, isCover, escKeyCloseable } = toRefs(props); // 宽度
+ const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props); // 宽度
  const isFullScreen = ref(false);
 
+ const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value );
+ const wrapperRight = computed(() => position.value === 'right' ? { 'right': width.value } : {} );
+
  const fullScreenEvent = () => {
  isFullScreen.value = !isFullScreen.value;
  }
@@ -43,29 +46,29 @@ export default defineComponent({
  return {
  zIndex,
  isFullScreen,
- width,
+ navWidth,
  visible,
  slots,
  isCover,
+ wrapperRight,
  fullScreenEvent,
  closeDrawer, 
  };
  },
  render() {
  const zindex: number = this.zIndex;
- const width: number = this.isFullScreen ? '100vw' : this.width;
  const fullScreenEvent: any = this.fullScreenEvent;
  const closeDrawer: any = this.closeDrawer;
  const isCover: boolean = this.isCover;
+ const wrapperRight: Record<string, unknown> = this.wrapperRight;
 
  if (!this.visible) return;
 
  return (
- <div class="devui-drawer" style={{ zIndex: zindex }}>
- {/* TODO : 有遮罩层时才能点击关闭 onClick={ closeDrawer }*/}
+ <div class="devui-drawer" style={{ zIndex: zindex }} onClick={ closeDrawer }>
  {isCover ? <div class="devui-overlay-backdrop"/>: ''}
- <div class="devui-overlay-wrapper" >
- <div class="devui-drawer-nav" style={{ 'left': 0, 'width': width }}>
+ <div class="devui-overlay-wrapper" style={ wrapperRight }>
+ <div class="devui-drawer-nav" style={{ 'width': this.navWidth }}>
  <div class="devui-drawer-content">
  <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
  <div> { this.slots.default ? this.slots.default() : <DrawerContainer/>} </div>

docs/components/drawer/index.md

@@ -20,6 +20,7 @@
  <d-drawer 
  v-model:visible="isDrawerShow" 
  :width="drawerWidth" 
+ position="right"
  @close="drawerClose"
  @afterOpened="drawerAfterOpened"
  />