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

Merge pull request !266 from nif/drawer

Author: kagol

devui/drawer/index.ts

@@ -10,7 +10,7 @@ export { Drawer }
 export default {
  title: 'Drawer 抽屉板',
  category: '反馈',
- status: '10%',
+ status: '30%',
  install(app: App): void {
 
  app.use(Drawer as any)

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

@@ -14,6 +14,7 @@
  position: absolute;
  top: 0;
  bottom: 0;
+ width: 100vw;
 }
 
 .devui-overlay-backdrop {
@@ -25,22 +26,18 @@
  height: 100vh;
 }
 
-.devui-drawer-nav,
-.devui-drawer-content {
+.devui-drawer-nav {
  position: absolute;
  top: 0;
  bottom: 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

@@ -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 navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} );
+
  const fullScreenEvent = () => {
  isFullScreen.value = !isFullScreen.value;
  }
@@ -43,29 +46,29 @@ export default defineComponent({
  return {
  zIndex,
  isFullScreen,
- width,
+ navWidth,
  visible,
  slots,
  isCover,
+ navRight,
  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 navRight: Record<string, unknown> = this.navRight;
 
  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">
+ <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>

docs/components/drawer/index.md

@@ -20,6 +20,7 @@
  <d-drawer 
  v-model:visible="isDrawerShow" 
  :width="drawerWidth" 
+ position="right"
  @close="drawerClose"
  @afterOpened="drawerAfterOpened"
  />
@@ -71,3 +72,4 @@ export default ({
 | onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
 | escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
 | afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |
+| position | `String` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](#基本用法) |