u

code/base-project/base-vue/packages/ao-design/src/drawer/index.tsx

@@ -0,0 +1,182 @@
+import type { PropType } from 'vue'
+import { defineComponent, onMounted, ref, Teleport } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Button from '../button/index'
+import Icon from '../icon/index'
+
+type DrawerSize = 'small' | 'medium' | 'large'
+type SizeType = number | string | DrawerSize
+
+export default defineComponent({
+  name: 'Drawer',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+      default: 'right',
+    },
+    size: {
+      type: [Number, String] as PropType<SizeType>,
+      default: 'medium',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+    confirmBtn: {
+      type: null,
+      default: () => ({ label: '确认', type: 'solid', status: 'primary' }),
+    },
+    cancelBtn: {
+      type: null,
+      default: () => ({ label: '取消', type: 'solid', status: 'default' }),
+    },
+    asyncConfirm: {
+      type: Boolean,
+      default: false,
+    },
+    maskClose: {
+      type: Boolean,
+      default: true,
+    },
+    appendTo: {
+      type: [String, Object] as PropType<string | HTMLElement>,
+      default: 'body',
+    },
+  },
+  emits: ['update:visible', 'confirm', 'cancel'],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('drawer')
+    const confirmLoading = ref<boolean>(false)
+
+    const close = () => {
+      emit('update:visible', false)
+      confirmLoading.value = false
+    }
+
+    const handleMaskClick = () => {
+      if (props.maskClose) {
+        close()
+      }
+    }
+
+    const resolveSize = (value: SizeType, defaultPx = 300) => {
+      if (typeof value === 'number')
+        return `${value}px`
+      if (typeof value === 'string') {
+        const presetMap: Record<DrawerSize, string> = {
+          small: '300px',
+          medium: '500px',
+          large: '700px',
+        }
+        if (presetMap[value as DrawerSize])
+          return presetMap[value as DrawerSize]
+        return value
+      }
+      return `${defaultPx}px`
+    }
+
+    const handleConfirm = () => {
+      if (props.asyncConfirm) {
+        confirmLoading.value = true
+        emit('confirm', close, () => {
+          confirmLoading.value = false
+        })
+      }
+      else {
+        close()
+        emit('confirm')
+      }
+    }
+
+    const handleCancel = () => {
+      close()
+      emit('cancel')
+    }
+    // 挂载目标位置
+    const targetEl = ref<HTMLElement>(document.body)
+
+    onMounted(() => {
+      if (props.appendTo instanceof HTMLElement) {
+        targetEl.value = props.appendTo
+      }
+      else if (typeof props.appendTo === 'string') {
+        const el = document.querySelector(props.appendTo)
+        if (el)
+          targetEl.value = el as HTMLElement
+      }
+    })
+
+    // 判断是否是 body
+    const isBody = props.appendTo === 'body'
+
+    return () => (
+      <Teleport to={targetEl.value}>
+        <div
+          class={[prefixCls, `${prefixCls}-${props.placement}`, props.visible && `${prefixCls}-open`]}
+          style={{
+            position: isBody ? 'fixed' : 'absolute',
+          }}
+        >
+          <div class={`${prefixCls}-mask`} onClick={handleMaskClick}></div>
+
+          <div
+            class={[`${prefixCls}-wrapper`]}
+            style={{
+              width: ['left', 'right'].includes(props.placement)
+                ? resolveSize(props.size)
+                : '100%',
+              height: ['top', 'bottom'].includes(props.placement)
+                ? resolveSize(props.size)
+                : '100%',
+            }}
+          >
+            <div class={`${prefixCls}-header`}>
+              {slots.header
+                ? slots.header()
+                : (
+                    <>
+                      <span>{props.title}</span>
+                      {props.showClose && (
+                        <Icon
+                          class={`${prefixCls}-close`}
+                          icon="ix:close"
+                          onClick={() => emit('update:visible', false)}
+                        />
+                      )}
+                    </>
+                  )}
+            </div>
+
+            <div class={`${prefixCls}-body`}>
+              {slots.default ? slots.default() : null}
+            </div>
+
+            <div class={`${prefixCls}-footer`}>
+              {slots.footer
+                ? slots.footer()
+                : (
+                    <>
+                      <Button {...props.cancelBtn} block onClick={handleCancel}>
+                        {props.cancelBtn.label}
+                      </Button>
+                      <Button loading={confirmLoading.value} block {...props.confirmBtn} onClick={handleConfirm}>
+                        {props.confirmBtn.label}
+                      </Button>
+                    </>
+                  )}
+            </div>
+
+          </div>
+        </div>
+      </Teleport>
+    )
+  },
+})