在这里首先说一下我的问题,最近再做一个项目,使用到了vue3,并且还是用的<script setup></script>这种格式的,我们领导之前用html写的一个项目要搬到我们这个系统中来。

在搬的时候就遇到一个这样的问题:我这边使用element中的<el-popover></el-popover>Popover弹出框这个组件,但是不管怎么我边怎么绑定都达不到我想要的的效果。

第一种方式是在<script setup></script>使用的ref结合v-model:visible="isPopoverVisible"这种方式,使用ref结合v-model:visible="isPopoverVisible"确实让element中的<el-popover></el-popover>Popover弹出框这个组件出现了,但是位置不对,我这边在组件中写上了placement=“right”,就是让它在右边显示,但是每次点击出现的时候都是在页面的最下面,而且出现的还是两个弹出框,数据也不对。

第二种方式我用的v-show,想的是既然不能直接使用这个组件那就直接自己写一个,但是这边又出现了新问题,当我使用的v-show的时候,element中的<el-popover v-show="data.moduleDetailsShow"></el-popover>Popover弹出框这个组件直接在页面上不显示了,这就把人搞得很郁闷无语。

最后我这边直接使用了插槽slot这个组件,直接使用具名插槽就可以,我这边附上我的操作截图:

成功截图:

到最后也是成功解决这个在vue3 <script setup></script>中使用<el-popover></el-popover>调用不显示或显示位置不对的问题。

好了,这个问题就到这里,有什么问题再联系我。

GitHub 加速计划 / vu / vue
88
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:6 个月前 )
9e887079 [skip ci] 5 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐