typescript 使用{ ref }检索div坐标

kg7wmglp 于 2023-08-08 发布在 TypeScript

关注(0)|答案(1)|浏览(159)

我在VUeJS工作的聊天项目，我想创建一个工具提示出现在我的鼠标指针悬停在用户名的顶部。
下面是我的代码：

<template>
    <Tooltip
        :user="user"
        :selectedUser="tooltipUser"
        :left="left"
        :top="top"
        v-if="tooltipVisible"
    />
    <div class="socialUsers" v-show="activeTab === 'users'">
        <div class="user" v-for="user in users" :key="user.id">
            <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltip" @click="displayTooltip(user)">
            <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import User from '@/models/user.model'
import Tooltip from '@/components/profile.tooltip.vue'

defineProps<{
    activeTab: string
    users: User[]
    user: User | null
}>()

const tooltipVisible = ref(false)
const tooltipUser = ref<User | null>(null)
const user = ref(tooltipUser)
const left = ref(0)
const top = ref(0)

const displayTooltip = (user: User): void => {
    tooltipUser.value = user
    tooltipVisible.value = !tooltipVisible.value
    const chatTooltip = this.$refs.chatTooltip
    if (chatTooltip) {
        const rect = chatTooltip.getBoundingClientRect()
        left.value = rect.x
        top.value = rect.y
    }
}

const getUserAvatarUrl = (filename: string): string => {
    return `http://${process.env.VUE_APP_BACKEND_HOST}:${process.env.VUE_APP_BACKEND_PORT}/users/avatar/${filename}`
}
</script>

字符串
我想将我想用this.$refs.chatTooltip检索的变量'left'和'top'传递给Tooltip组件
有可能吗？是否有更好的解决方案？
谢谢你的帮助
Fab

typescript

来源：https://stackoverflow.com/questions/76779875/using-ref-to-retrieve-a-div-coordinates

1条答案

按热度按时间

k10s72fa1#

我不确定是否能正确理解你的问题。但我认为这是关于找到被点击的img的引用。
这里你的ref chatTooltip是一个数组（就像在v-for中的Refs一样）。您应该能够使用被单击的用户的索引来获得正确的ref。
我不是很确定我的TS代码，但它应该是这样的。

<div class="user" v-for="(user,i) in users" :key="user.id">
    <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltips" @click="displayTooltip(user,i)">
    <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span>
</div>

个字符

**编辑：**这里是你的代码的简化版本，我可以执行。它应该是一个很好的 backbone 来重新构建您的组件。

<template>
    <div class="socialUsers">
        <div class="user" v-for="(user, i) in users" :key="user.id">
            <img class="avatar" :alt="user.username" ref="chatTooltips" @click="displayTooltip(user, i)">
            <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tooltipVisible = ref(false)
const left = ref(0)
const top = ref(0)
const chatTooltips = ref([])

const users = [
    { username: 'joe', usernameColor: '#ff0000', id: 0 },
    { username: 'jane', usernameColor: '#00ff00', id: 1 },
]

const displayTooltip = (_user: Object, i: number): void => {
    tooltipVisible.value = !tooltipVisible.value
    const chatTooltip = chatTooltips
    if (chatTooltip) {
        console.log(chatTooltip)
        const rect = chatTooltips.value[i].getBoundingClientRect()
        left.value = rect.x
        top.value = rect.y
         
        console.log(rect)
    }
}
</script>

型

赞(0）回复(0）举报 2023-08-08

我来回答

typescript 使用{ ref }检索div坐标

1条答案

相关问题

热门标签

最新问答