feat: Dialog组件重构

kailong321200875 · Jun 26, 2023 · 3701a04 · 3701a04
1 parent 7ef1d1e
commit 3701a04
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 15 deletions.
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
@@ -50,7 +50,6 @@ watch(
 )
 
 const dialogStyle = computed(() => {
-  console.log(unref(dialogHeight))
   return {
     height: unref(dialogHeight)
   }
@@ -64,20 +63,32 @@ const dialogStyle = computed(() => {
     destroy-on-close
     lock-scroll
     draggable
+    top="0"
     :close-on-click-modal="false"
+    :show-close="false"
   >
-    <template #header>
-      <div class="flex justify-between">
+    <template #header="{ close }">
+      <div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
         <slot name="title">
           {{ title }}
         </slot>
-        <Icon
-          v-if="fullscreen"
-          class="mr-18px cursor-pointer is-hover mt-2px z-10"
-          :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
-          color="var(--el-color-info)"
-          @click="toggleFull"
-        />
+        <div
+          class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
+        >
+          <Icon
+            v-if="fullscreen"
+            class="cursor-pointer is-hover !h-54px mr-10px"
+            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
+            color="var(--el-color-info)"
+            @click="toggleFull"
+          />
+          <Icon
+            class="cursor-pointer is-hover !h-54px"
+            icon="ep:close"
+            color="var(--el-color-info)"
+            @click="close"
+          />
+        </div>
       </div>
     </template>
 
@@ -92,17 +103,29 @@ const dialogStyle = computed(() => {
 </template>
 
 <style lang="less">
+.@{elNamespace}-overlay-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .@{elNamespace}-dialog {
+  margin: 0 !important;
   &__header {
     margin-right: 0 !important;
     border-bottom: 1px solid var(--el-border-color);
+    padding: 0;
+    height: 54px;
   }
   &__body {
     padding: 0 !important;
   }
   &__footer {
     border-top: 1px solid var(--el-border-color);
   }
+  &__headerbtn {
+    top: 0;
+  }
 }
 
 .is-hover {

diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
@@ -71,8 +71,6 @@ watch(
       <use :xlink:href="symbolId" />
     </svg>
 
-    <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
-      <span class="iconify" :data-icon="symbolId"></span>
-    </span>
+    <span v-else ref="elRef" class="iconify" :data-icon="symbolId" :style="getIconifyStyle"></span>
   </ElIcon>
 </template>
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
@@ -502,7 +502,9 @@ watch(
     }
 
     &:hover {
-      :deep(span) {
+      :deep(span),
+      :deep(i),
+      :deep(svg) {
         color: var(--el-color-black) !important;
       }
     }
@@ -555,7 +557,9 @@ watch(
   .@{prefix-cls} {
     &__tool {
       &:hover {
-        :deep(span) {
+        :deep(span),
+        :deep(i),
+        :deep(svg) {
           color: #fff !important;
         }
       }

diff --git a/uno.config.ts b/uno.config.ts
@@ -96,6 +96,19 @@ ${selector}:after {
   background-color: var(--el-border-color);
   z-index: 3;
 }
+`
+      }
+    ],
+    [
+      /^is-hover$/,
+      ([], { rawSelector }) => {
+        const selector = e(rawSelector)
+        return `
+${selector}:hover {
+  ${selector} span,i,svg {
+    color: var(--el-color-primary) !important;
+  }
+}
 `
       }
     ]