element-ui解决el-popover的边界重新计算元素位置的问题

JavaScript028

element-ui解决el-popover的边界重新计算元素位置的问题,第1张

在项目中会遇到使用el-popover但是却不想要原生的边界重新计算元素的位置,比如:

当浏览器滚轮向下

如果我不想要有自动重新计算元素的位置,怎么办呢?

1、解决问题的第一步当然是去element上去看官方文档了

浏览popover组件的Attributes后我发现了这个popper-options属性

进到popper.js里面,用chrome翻译一下

找到了可以控制改组件行为的属性 boundariesElement,默认‘viewport‘是可视部分为边界,我这里改为‘body’

这样这个问题就解决了

2、如果官方文档还是不能帮助你解决问题

百度和github可以帮到你,翻墙的同学可以去stackoverflow逛逛

Bootstrap里如何动态创建一个popover

一种简单的方法就是自己写 popover 的 html,并且在需要显示 popover 的地方控制内容变化。

$("#your-button").popover({

html: true,

content: '<div id="content">...</div>'

})

.click(function() {

$("#content").text('YOUR CONTENT')

})

P.S. 最新的 bootstrap 3 的 popover(options) 初始化参数里提供了修改默认 popover template html 的选项,我没有实际用过不确定有没有坑,看起来会比上面的方法更加优雅。

js:

<script src='js/jquery-1.9.0.min.js' type="text/javascript"></script>

<script src='js/bootstrap.min.js' type="text/javascript"></script>

<link href='css/bootstrap.min.css' rel="stylesheet">

<link href='css/bootstrap.add.css' rel="stylesheet">

window.addEventListener("hashchange", function() { scrollBy(0, -145) })

$('#profil').popover({placement : 'bottom',html : 'true', trigger : 'hover'})

html:

<button class="btn btn-small btn-bpf-inverse" type="button" id="profil" data-original-title="Profil" href="#" data-toggle="popover" title="Détail du profil"

data-content="

<p>Profil métier :<br><span class='label label-success'>Gestion local des services</span></p>

<p>Type de Service :<br><span class='label label-success'>Services aux véhicules</span></p>

<p>Pays :<br><span class='label label-success'>Italy</span></p>

<p>Marque :<br><span class='label label-success'>Citroën</span></p>

">

<i class="icon-user"></i>Profil

</button>