vue el-popover使用

最新推荐文章于 2025-05-12 17:42:13 发布

前端方程

最新推荐文章于 2025-05-12 17:42:13 发布

阅读量1.4k

点赞数

分类专栏： elment ui vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44040867/article/details/127109997

版权

vue 同时被 2 个专栏收录

51 篇文章

订阅专栏

elment ui

14 篇文章

订阅专栏

本文介绍了如何在Vue中使用Popover弹出框组件，包括其属性配置如placement、width、trigger等，以及手动更新Popper的方法。示例展示了在按钮点击后显示包含系统字典数据的Popover，并在接口赋值后调用$nextTick更新Popper的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


            <el-popover
              placement="top"
              width="240"
              trigger="manual"
              transition="fade-in-linear"
              v-model="visibleContacts"
              ref="popover"
              :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
            >
              <div class="tip-main"> 
                <div class="t-m-div">
                  <div class="t-m-row" v-for="item in sysDictDataList" :key="item.id">
                    <p>{{ item.dictLabel }}</p>
                    <span> {{ item.dictValue }} </span>
                  </div>
                </div>
              </div>
              <el-button slot="reference" @click="visibleBtn"
                ><span> 1111 </span></el-button
              >
            </el-popover>

注意：接口赋值后面添加 内容

          this.$nextTick(() => {
            this.$refs.popover.updatePopper()
          })