el-popover 鼠标移入获取数据并显示popover

原创于 2021-12-16 17:25:59 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何在Vue或React项目中，通过鼠标enter事件控制弹出式popover，展示人工智能相关的数据。用户可以通过点击列表项跳转到详细信息，同时实现数据列表的动态加载和可见状态管理。

部署运行你感兴趣的模型镜像

<ul v-for="(item,index) in left_nav" :key="index">
            <el-popover 
                placement="top-start" 

                //自定义触发popover事件
                trigger="manual"
                v-model="visible" 

            >

                <!-- pop里的数据 -->
                <ul>
                    <li v-for="(itemPop,index) in popContent" :key="index">
                        <h3>{{ itemPop.type }}</h3>
                        <p v-for="(itemContent,index) in itemPop.serverInfoList"         :key="index" @click="jumpDetal(itemContent.path,itemContent,)">{{ itemContent.name }}</p>
                    </li>
                </ul>


                //@mouseenter 事件里既改变量 又触发方法
                <li :class="{ active:num == index}" @mouseenter="visible = true && getAiSerList(index)" @mouseleave="visible = false" slot="reference">{{item.name}}</li>
            </el-popover>
<ul/>

您可能感兴趣的与本文相关的镜像