From 803b49083e5379e3c681f483607ba98b48e69d4e Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Wed, 27 Dec 2023 23:55:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E6=82=AC=E6=B5=AE?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/UserInfoCard/index.vue     | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue

diff --git a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
new file mode 100644
index 00000000..acf1733c
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="modelValue" class="userInfo-card" ref="cardRef">
+    <!-- 个人信息内容 -->
+    <div class="info">
+      <h2>温海靖</h2>
+      <p>XXX</p>
+      <!-- 其他个人信息... -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  actOnRef: {},
+});
+const emit = defineEmits("update:modelValue");
+const cardRef = ref(null);
+const avatarRef = computed(() => props.actOnRef);
+
+nextTick(() => {
+  document.addEventListener("mouseup", (e) => {
+    // 如果点击的是按钮   则不执行下面的操作
+    if (avatarRef.value && cardRef.value) {
+      if (cardRef.value.contains(e.target)) {
+        return;
+      }
+      if (!cardRef.value.contains(e.target)) {
+        // 点击的区域不包含在弹窗区域之内就关闭弹窗
+        emit("update:modelValue", false);
+      }
+    }
+  });
+});
+</script>
+
+<style scoped>
+.userInfo-card {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: pink;
+  /* 卡片样式... */
+}
+</style>