草庐IT

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭 问题

小坚果_ 2023-09-06 原文

先说定位问题

如果往里边动态添加内容，定位偏移

下面是解决办法:

绑定ref，最关键的是有这行代码
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
直接粘贴就行，这是html部分，在js部分也有一行代码
<el-popover placement="top" trigger="click" width="470" ref="popoverRef" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }">
  <el-button slot="reference">
    click 激活
  </el-button>
</el-popover>

这是JS部分代码，this.$refs.popoverRef.updatePopper()这行代码意思是数据更新完重新计算位置，写在$nextTick里确保一定是数据更新完成之后，这几行代码放在你动态更新 el-popover 里的内容那行代码之后

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

接着说二次确认， el-popover 会自动关闭。需求：不自动关闭，继续展示数据。

因为我写的里边有删除操作，所以有二次确认的操作，当我点确定或者取消删除的时候，el-popover就关闭了，但删除完肯定是不想关闭的，肯定想看到列表删了没。

下面就是解决办法：

上边已经绑定ref了，等会可以直接用ref，如果没绑定ref，现在绑定ref，绑定之后打印一下

console.log(this.$refs.popoverRef)，

你会看到下面这些，里边有两个函数，这两个函数就是关闭弹框，显示弹框，如果你不想关闭，

在你操作的地方写下这行代码

this.$refs.popoverRef.doShow();

同理如果你想关闭，调这个方法  this.$refs.popoverRef.doClose();

 最后讲样式问题，你会发现怎么调样式都调不动，不论是深度选择器，还是行间，都调不动样式。

下面是我的需求，因为我是动态添加和删除数据的，添加到一定高度，我想让内容可以滚动，但是不论我怎么设置最大高度都不行。

解决办法：

<el-popover placement="top" trigger="click" width="470" popper-class="el_popover_class">

添加 popper-class属性，这个属性就是我们平时的 class属性，这不就好办了，我就去下面写样式了，但是发现没有用，

先说解决办法，之后说原因。

在App.vue里边写你要写的css样式，这是我的，你们可以参考

.el_popover_class{
    max-height: 440px !important;
    overflow-y: auto !important;
}
// 这个是我不想要滚动条,去掉滚动条的css代码,你们要的话可以不写
.el_popover_class::-webkit-scrollbar {
    display: none !important;
}

原因可以看下面这张图,你会发现 app 和 el-popover 是平级，又因为我们每个组件的style标签都写有 scoped 属性，所以在组件里写样式不起效

 点旁边空白，弹窗消失，再次点击的时候，数据不更新，给人的感觉就是这一块没有v-if

有两个事件( show 、hide )，可以解决这个问题，有什么需求可以写在这两个事件函数里

<el-popover placement="top" trigger="click" width="470" v-if="infoTiem.userType=='PATIENT'" ref="popoverRef" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }" popper-class="el-popover_oue" @show="onPopoverShow" @hide="onPopoverHide">

这就是我用 el-popover 这个组件遇到的问题，希望对你们有帮助

element-uiel-popoverxff0cxff0xffelementuivue.jsjavascript

有关element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭 问题的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  4. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  5. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  6. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  10. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

随机推荐