处理弹窗的放大缩小

2026-05-12 00:00:01 +08:00 · 2021-12-20 13:36:54 +08:00
parent f37ed1f3d3
commit 8dc4769b64
19 changed files with 345 additions and 106 deletions
@@ -0,0 +1,127 @@
+<template>
+  <n-modal class="go-modal-card" v-model:show="showModal">
+    <slot name="default">
+      <n-card hoverable size="small">
+        <div class="list-content">
+          <!-- 顶部按钮 -->
+          <n-space class="list-content-top">
+            <AppleControlBtn
+              :narrow="true"
+              :hidden="['close']"
+              @remove="closeHandle"
+            />
+          </n-space>
+          <!-- 中间 -->
+          <div class="list-content-img">
+            <img
+              :src="requireUrl('.', '20211219181327.png')"
+              :alt="cardData?.title"
+            />
+          </div>
+        </div>
+        <template #action>
+          <n-space class="list-footer" justify="space-between">
+            <n-text>
+              {{ cardData?.title || '' }}
+            </n-text>
+
+            <!-- 工具 -->
+            <n-space>
+              <n-text>
+                <n-badge
+                  class="animation-twinkle"
+                  dot
+                  :color="cardData?.release ? '#34c749' : '#fcbc40'"
+                />
+                {{ cardData?.release ? '已发布' : '未发布' }}
+              </n-text>
+
+              <template v-for="item in fnBtnList" :key="item.key">
+                <n-tooltip placement="bottom" trigger="hover">
+                  <template #trigger>
+                    <n-button size="small">
+                      <template #icon>
+                        <component :is="item.icon" />
+                      </template>
+                    </n-button>
+                  </template>
+                  <span> {{ item.label }}</span>
+                </n-tooltip>
+              </template>
+            </n-space>
+            <!-- end -->
+          </n-space>
+        </template>
+      </n-card>
+    </slot>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { renderIcon } from '@/utils/index'
+import { icon } from '@/plugins'
+import { AppleControlBtn } from '@/components/AppleControlBtn'
+const { HammerIcon } = icon.ionicons5
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+  modalShow: Boolean,
+  cardData: Object
+})
+
+const handleSelect = (key: string) => {
+  console.log(key)
+}
+
+const requireUrl = (path: string, name: string) => {
+  return new URL(`${path}/${name}`, import.meta.url).href
+}
+
+const fnBtnList = [
+  {
+    label: '编辑',
+    key: 'edit',
+    icon: renderIcon(HammerIcon)
+  }
+]
+// 放大处理
+const resizeHandle = () => {}
+
+// 关闭对话框
+const closeHandle = () => {
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+$padding: 30px;
+$contentHeight: calc(80vh);
+@include go('modal-card') {
+  position: relative;
+  width: 82vw;
+  .list-content {
+    margin-top: 20px;
+    border-radius: $--border-radius-base;
+    overflow: hidden;
+    @include background-point('background-point');
+    @extend .go-point-bg;
+    &-top {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      height: 22px;
+    }
+    &-img {
+      @extend .go-flex-center;
+      img {
+        height: $contentHeight;
+        @extend .go-border-radius;
+      }
+    }
+  }
+  .list-footer {
+    line-height: 30px;
+  }
+}
+</style>