update

README.md

@@ -28,9 +28,10 @@
 
 #### 这里是element-plus版本，如果你更倾向于使用antd，请[点击这里](https://github.com/1esse/vue-clownfish-admin)。
 
-## ✨ 最新版本 v1.0.6
-1. 优化动画效果，使其更加流畅自然
-  ```
+## ✨ 最新版本 v1.0.7
+1. 新增modal模态框组件
+2. 新增loading加载组件
+3. 新增模态框展示页面
 
 ## 🐬 简介
 [vue-clownfish-admin-elem](https://github.com/1esse/vue-clownfish-admin-elem) 是一个由Vue最新技术栈开发的后台管理前端简易框架。基于vue3，集成vue3最新生态系统的核心库实现。主要的技术栈有

components.d.ts

@@ -5,6 +5,7 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Dialog: typeof import('./src/components/Dialog.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -18,6 +19,8 @@ declare module '@vue/runtime-core' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElResult: typeof import('element-plus/es')['ElResult']
+    Loading: typeof import('./src/components/Loading.vue')['default']
     MenuPanel: typeof import('./src/components/MenuPanel.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -5,7 +5,7 @@
     "email": "572116385@qq.com",
     "url": "https://1esse.github.io/vue-clownfish-admin/"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "private": "true",
   "scripts": {
     "dev": "vite",
@@ -42,4 +42,4 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^0.37.1"
   }
-}
+}

src/app.d.ts

@@ -2,11 +2,17 @@
  * 开关类型：on开 off关
  */
 type SwitchType = 'on' | 'off'
+
 /**
  * 环境类型 
  * 
  * development：开发环境；
  * staging：预发布环境；
  * production：生产环境；
  */
-type envType = 'development' | 'staging' | 'production'
+type envType = 'development' | 'staging' | 'production'
+
+/**
+ * 动画类型
+ */
+type transitionType = 'fade' | 'fade-scale' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down'

src/components/Dialog.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import Shadow from './Shadow.vue'
+import { CloseBold } from '@element-plus/icons-vue'
+import isMobile from '@/composables/isMobile'
+import Loading from './Loading.vue'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  width?: string
+  height?: string
+  maxWidth?: string
+  minHeight?: string
+  maxHeight?: string
+  loading?: boolean
+  preventShadowEvent?: boolean
+  showClose?: boolean
+  transition?: transitionType
+}>(), {
+  width: '40rem',
+  height: 'auto',
+  maxWidth: '90vw',
+  minHeight: '25rem',
+  maxHeight: '90vh',
+  loading: false,
+  preventShadowEvent: true,
+  showClose: true,
+  transition: 'fade-scale'
+})
+
+const _isMobile = isMobile()
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+}>()
+
+function shadowClick() {
+  // 如果显示关闭按钮（手机端会自动隐藏关闭按钮，关闭劝流转到点击阴影）
+  if (props.showClose) {
+    // 且不是在手机端，则把关闭权交给关闭按钮
+    if (!_isMobile.value && props.preventShadowEvent) return
+  }
+  emit('update:show', false)
+}
+
+</script>
+<template>
+  <Teleport to="body">
+    <Transition :name="props.transition" mode="out-in" appear>
+      <Shadow v-if="props.show" contentCenter @shadowClick="shadowClick">
+        <div :style="{ position: 'relative', maxHeight: props.maxHeight }">
+          <div class="block shadow modal"
+            :style="{ width: props.width, height: props.height, maxWidth: props.maxWidth, minHeight: props.minHeight, maxHeight: props.maxHeight }">
+            <Loading v-if="props.loading"></Loading>
+            <template v-else>
+              <slot name="modalHeader"></slot>
+              <main class="modal-main">
+                <slot></slot>
+              </main>
+              <slot name="modalFooter"></slot>
+            </template>
+          </div>
+          <el-icon v-if="!_isMobile && props.showClose" class="icon-close" @click="emit('update:show', false)">
+            <CloseBold />
+          </el-icon>
+        </div>
+      </Shadow>
+    </Transition>
+  </Teleport>
+</template>
+<style scoped>
+.modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+}
+
+.modal-main {
+  flex: 1;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-close {
+  position: absolute;
+  top: .3rem;
+  right: -2rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+  color: white;
+}
+</style>

src/components/Loading.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import loadingGif from '@/assets/loading.gif'
+</script>
+
+<template>
+  <div class="loading-wrapper">
+    <img class="loading-gif" :src="loadingGif" alt="加载中...">
+  </div>
+</template>
+
+<style scoped>
+.loading-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.loading-gif {
+  width: 5rem;
+  height: auto;
+  object-fit: contain;
+}
+</style>

src/layout/HeadBar.vue

@@ -63,6 +63,7 @@ header {
 }
 
 .icon-sidebar-trigger {
+  cursor: pointer;
   margin-right: 1.2rem;
   font-size: 1.2rem;
 

src/router/index.ts

@@ -79,6 +79,21 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/login.vue'),
     meta: { hidden: true, title: '登录' }
   },
+  {
+    path: '/modal',
+    name: 'Modal',
+    component: Layout,
+    redirect: '/modal/index',
+    meta: { breadcrumb: false },
+    children: [
+      {
+        path: 'index',
+        name: 'ModalIndex',
+        component: () => import('@/views/modal.vue'),
+        meta: { title: '模态框', icon: 'dashboard' }
+      }
+    ]
+  },
   {
     path: '/https://github.com/1esse/vue-clownfish-admin',
     component: undefined,

src/styles/_transition.postcss

@@ -23,10 +23,44 @@
 .slide-left-enter-from,
 .slide-left-leave-to {
   opacity: 0;
-  transform: translateX(-5vw);
+  transform: translateX(5vw);
 }
 
 .slide-left-enter-active,
 .slide-left-leave-active {
   transition: all .3s ease;
 }
+
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-5vw);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all .3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(5vw);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all .3s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-5vw);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all .3s ease;
+}

src/views/modal.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Dialog from '@/components/Dialog.vue'
+import { reactive } from 'vue'
+const dialogs = reactive({
+  dialog1: {
+    show: false,
+    loading: false,
+    timeout: <NodeJS.Timeout | null>null,
+    transition: <transitionType>'slide-down'
+  }
+})
+
+function showDialog(transition: transitionType) {
+  dialogs.dialog1.timeout && clearTimeout(dialogs.dialog1.timeout)
+  dialogs.dialog1.loading = true
+  dialogs.dialog1.transition = transition
+  dialogs.dialog1.show = true
+  dialogs.dialog1.timeout = setTimeout(() => {
+    dialogs.dialog1.loading = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <div>
+    <Dialog v-model:show="dialogs.dialog1.show" :loading="dialogs.dialog1.loading"
+      :transition="dialogs.dialog1.transition">
+      <template #modalHeader>
+        <div style="height: 3rem; background-color: aquamarine;">模态框头部</div>
+      </template>
+      <div style="width: 100%; height: 50rem;  background-color: lightblue;">
+        模态框内容
+      </div>
+      <template #modalFooter>
+        <div style="height: 3rem; background-color: bisque;">模态框底部</div>
+      </template>
+    </Dialog>
+    <ElButton @click="showDialog('fade')">fade模态框</ElButton>
+    <ElButton @click="showDialog('fade-scale')">fade-scale模态框</ElButton>
+    <ElButton @click="showDialog('slide-up')">slide-up模态框</ElButton>
+    <ElButton @click="showDialog('slide-down')">slide-down模态框</ElButton>
+    <ElButton @click="showDialog('slide-left')">slide-left模态框</ElButton>
+    <ElButton @click="showDialog('slide-right')">slide-right模态框</ElButton>
+  </div>
+</template>
+
+<style>
+</style>