feat: add vue3(element-plus)

yudao-ui-admin-vue3/src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+import Dialog from './src/Dialog.vue'
+
+export { Dialog }

yudao-ui-admin-vue3/src/components/Dialog/src/Dialog.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ElDialog, ElScrollbar } from 'element-plus'
+import { propTypes } from '@/utils/propTypes'
+import { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'
+import { isNumber } from '@/utils/is'
+
+const slots = useSlots()
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  title: propTypes.string.def('Dialog'),
+  fullscreen: propTypes.bool.def(true),
+  maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
+  width: propTypes.oneOfType([String, Number]).def('35%')
+})
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const isFullscreen = ref(false)
+
+const toggleFull = () => {
+  isFullscreen.value = !unref(isFullscreen)
+}
+
+const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
+
+watch(
+  () => isFullscreen.value,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      const windowHeight = document.documentElement.offsetHeight
+      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
+    } else {
+      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const dialogStyle = computed(() => {
+  return {
+    height: unref(dialogHeight)
+  }
+})
+</script>
+
+<template>
+  <ElDialog
+    v-bind="getBindValue"
+    :fullscreen="isFullscreen"
+    destroy-on-close
+    lock-scroll
+    draggable
+    :width="width"
+    :close-on-click-modal="true"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <slot name="title">
+          {{ title }}
+        </slot>
+        <Icon
+          v-if="fullscreen"
+          class="mr-22px cursor-pointer is-hover mt-2px"
+          :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+          color="var(--el-color-info)"
+          @click="toggleFull"
+        />
+      </div>
+    </template>
+
+    <ElScrollbar :style="dialogStyle">
+      <slot></slot>
+    </ElScrollbar>
+
+    <template v-if="slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+  </ElDialog>
+</template>
+
+<style lang="less">
+.@{elNamespace}-dialog__header {
+  border-bottom: 1px solid var(--tags-view-border-color);
+  margin-right: 0 !important;
+}
+
+.@{elNamespace}-dialog__footer {
+  border-top: 0px solid var(--tags-view-border-color);
+}
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+
+.is-hover {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.dark {
+  .@{elNamespace}-dialog__header {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+
+  .@{elNamespace}-dialog__footer {
+    border-top: 1px solid var(--el-border-color);
+  }
+}
+</style>