Vue3 根据点击位置，实现一个用户头像弹框定位

**开篇：**

在Web开发中，响应式UI设计一直是提升用户体验的关键所在。Vue3以其优秀的响应式机制和简洁的API深受开发者喜爱。本文将详细介绍如何利用Vue3的功能特性，结合DOM事件处理和CSS定位，实现一个可以根据点击位置动态显示用户头像弹框的功能。为了确保文章具有实践指导意义，我们将按照实际操作流程，逐步解析并提供核心代码示例。

---

### **一、搭建Vue3项目与基础布局**

**标题：** 初始化项目与页面结构设定

**内容：**

首先，使用Vue CLI创建一个新的Vue3项目，并在主页面上设置基础布局，包括一个用于触发头像弹框显示的用户头像区域和一个隐藏的弹框组件。

```html

<template>

<div id="app">

<!-- 用户列表或其他包含头像的区域 -->

<div @click="showAvatarPopup($event)">

<img :src="user.avatarUrl" alt="User Avatar" class="avatar" />

</div>

<!-- 头像弹框组件，初始状态为隐藏 -->

<AvatarPopup v-if="isPopupVisible" :position="popupPosition" :user="user" @close="hideAvatarPopup" />

</div>

</template>

<script>

import AvatarPopup from '@/components/AvatarPopup.vue';

export default {

components: {

AvatarPopup,

},

data() {

return {

isPopupVisible: false,

user: { // 示例用户数据

avatarUrl: 'path/to/avatar.jpg',

// 其他用户信息...

},

popupPosition: { x: 0, y: 0 }, // 弹框初始位置

};

},

methods: {

showAvatarPopup(event) {

this.popupPosition={ x: event.clientX, y: event.clientY }; // 获取点击位置

this.isPopupVisible=true; // 显示弹框

},

hideAvatarPopup() {

this.isPopupVisible=false; // 隐藏弹框

},

},

};

</script>

```

### **二、创建并样式化头像弹框组件**

**标题：** 设计并实现自定义的`AvatarPopup`组件

**内容：**

在`AvatarPopup.vue`组件中，我们需要接收传递过来的位置坐标，并使用CSS绝对定位来使弹框跟随鼠标点击位置展示。

```html

<!-- AvatarPopup.vue -->

<template>

<div class="avatar-popup" :style="{ top: position.y + 'px', left: position.x + 'px' }">

<img :src="user.avatarUrl" alt="Popup Avatar" class="popup-avatar" />

<!-- 其他用户信息展示... -->

<button @click="emitClose">关闭</button>

</div>

</template>

<script>

export default {

props: {

position: Object,

user: Object,

},

emits: ['close'],

methods: {

emitClose() {

this.$emit('close');

},

},

};

</script>

<style scoped>

.avatar-popup {

position: absolute;

width: fit-content;

background-color: #fff;

border-radius: 4px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

padding: 1rem;

z-index: 1000; /* 确保弹框位于顶层 */

}

.popup-avatar {

width: 100px;

height: 100px;

object-fit: cover;

}

</style>

```

### **三、优化弹框显示逻辑**

**标题：** 考虑边界情况，确保弹框始终在可视区域内

**内容：**

为了防止弹框超出浏览器窗口范围，我们需要对计算出的弹框位置进行适当的调整：

```javascript

// 在App.vue中的methods内

showAvatarPopup(event) {

const viewportWidth=document.documentElement.clientWidth;

const viewportHeight=document.documentElement.clientHeight;

const popupWidth=document.querySelector('.avatar-popup').offsetWidth;

const popupHeight=document.querySelector('.avatar-popup').offsetHeight;

const x=Math.min(Math.max(event.clientX, popupWidth / 2), viewportWidth - popupWidth / 2);

const y=Math.min(Math.max(event.clientY, popupHeight / 2), viewportHeight - popupHeight / 2);

this.popupPosition={ x, y };

this.isPopupVisible=true;

}

```

### **四、添加过渡动画效果**

**标题：** 使用Vue Transition实现弹框显示/隐藏动画

**内容：**

为了让弹框的出现和消失更加流畅自然，我们可以使用Vue的Transition组件包裹AvatarPopup，为其添加CSS过渡动画。

```html

<!-- App.vue -->

<transition name="fade" appear>

<AvatarPopup v-if="isPopupVisible" :position="popupPosition" :user="user" @close="hideAvatarPopup" />

</transition>

<style>

.fade-enter-active,

.fade-leave-active {

transition: opacity .3s ease;

}

.fade-enter-from,

.fade-leave-to {

opacity: 0;

}

</style>

```

---

**总结：**

通过以上步骤，我们成功地在Vue3项目中实现了根据点击位置动态定位用户头像弹框的功能。这一功能在社交网络、评论区以及其他需要展现用户详细信息的场景中非常实用，既提升了用户体验，也展现了Vue3强大而灵活的应用能力。随着进一步实践，你可以尝试增加更多高级功能，如自动调整弹框方向以适应屏幕边界，或是集成拖拽移动等功能，从而使得弹框组件更为完善和人性化。

ue3 根据点击位置，实现一个用户头像弹框定位

需求背景

最近在做直播后台，涉及到对用户的一些操作，比如关注/取关/禁言/踢出直播间。多个地方都要用，需要封装一个弹框组件

效果图

实现过程分析

2. 根据点击元素，获取元素的位置
3. 动态设置元素top，left位置

top 和 left 如何获取

根据 点击事件event参数，来获取位置，根据需要来实际计算位置

• 元素距离左边的距离 + 元素本身的宽度

获取元素top/left，其实直接用getBoundingClientRect 里的bottom / right 即可

代码实现

export const getCurrentDialogXY=(event: Event)=> {
  const target=event.target as HTMLElement
  const { bottom, right }=target.getBoundingClientRect()
  return { bottom, right }
}

调用

```js
const avatarHandler=(event: Event)=> {
  const { right, bottom }=getCurrentDialogXY(event)
  currentX.value=right
  currentY.value=bottom
}

传入子组件，在子组件内接收到left/top 重新定位即可

    <user-info-dialog
        :left="currentX"
        :top="currentY"
    />

<div ref="userInfoRef" class="dialog-wrap" :style="{ top: top + 'px', left: left + 'px' }"></div>

细节处理

1. 通过设置，你会发现弹框始终定位在元素右下角，可以根据自身需求，设置元素位置

通过监听弹框的ref（弹框有显示隐藏逻辑，所以监听弹框的ref即可，然后动态设置位置），

watchEffect(()=> {
  const userInfoRefValue=userInfoRef.value
  if (userInfoRefValue) {
    const offsetHeight=userInfoRefValue.offsetHeight // 获取弹框的高度
    const offsetWidth=userInfoRefValue.offsetWidth // 获取元素的宽度

    // 不管弹框显示是左侧还是右侧，根据需求 都需要 减去 弹框的高度 - 用户头像高度的一半 进行定位
      propTop.value=props.top - offsetHeight - userAvatarWidth.value / 2
      
    // 如果是弹框显示在左侧，需要减去弹框的宽度 - 头像的宽度
    if (props.roleEnumType===1) {
      propLeft.value=props.left - offsetWidth - userAvatarWidth.value
    }
  }
})

2. 弹框打开之后，要点击所有位置，都可以关闭

• 那我们就需要实现一个朦层（透明色），点击朦层，触发关闭即可

你会发现，其实我们的整个元素，是直接在根节点上，根常规里的，每个弹框，必须要绑定在循环里，才能做一一对应的关系，怎么不太一样呢？ 这里是用到的

vue3中的Teleport：将其插槽内容渲染到 DOM 中的另一个位置 这对于我们层级比较多，做全局定位，脱离当前元素，非常好用！！！