[英]Popover with vue.js and bootstrap 4
I'm trying to add popovers from bootstrap 4 into my vue.js app.我正在尝试将 bootstrap 4 中的弹出窗口添加到我的 vue.js 应用程序中。 I could probably use something like
https://www.npmjs.com/package/vue-popperjs
, but I'd like to make it work old way, without using additional libraries (just so I could figure out the principle on how to do that)我可能可以使用类似
https://www.npmjs.com/package/vue-popperjs
东西,但我想让它以旧方式工作,而不使用额外的库(这样我才能弄清楚如何这样做)
I have installed Popper.js
with npm install --save popper
我已经使用
npm install --save popper
安装了Popper.js
In my webpack.config.js
I also have:在我的
webpack.config.js
我也有:
plugins: [
new WebpackNotifierPlugin(),
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery',
popper: 'popper'
})
],
Then I'm tring to build a vue component:然后我正在尝试构建一个 vue 组件:
<template>
....
<button type="button" class="btn btn-link" title="" data-container="body" data-toggle="popover" data-placement="bottom" data-original-title="Connection String" aria-describedby="popover253231">
Click to show
</button>
....
</template>
<script>
const _ = require("lodash");
const $ = require("jquery");
// This doesn't work
//const poppper = require("popper");
var d = {
data() {
...
},
created: function() {
// Load data with $http module
},
updated: function() {
$(function () {
$('[data-toggle="popover"]').popover()
})
},
};
export default d;
</script>
The button will appear only after load, because it has a parent element that has v-for
binding on the data loaded with ajax.该按钮仅在加载后才会出现,因为它有一个父元素,该元素对使用 ajax 加载的数据进行了
v-for
绑定。
I don't know how to require popper
, so the line $('[data-toggle="popover"]').popover()
resolves (it cannot find function popover()
)我不知道如何要求
popper
,所以行$('[data-toggle="popover"]').popover()
解决了(它找不到函数popover()
)
Also the line const popper = require("poppper")
doesn't work either with the error Module parse failed: 'return' outside of function
.此外,行
const popper = require("poppper")
也不起作用,错误Module parse failed: 'return' outside of function
。 My guess is that I can't load popper
with require
, because it is not built for it.我的猜测是我不能用
require
加载popper
,因为它不是为它构建的。
After some struggling and trying completely random ideas, I had the one that worked.经过一番挣扎和尝试完全随机的想法之后,我有了一个有效的想法。 Turns out the problem was that I was using
bootstrap
that is installed into ASP.NET MVC
as a bundle (so it added it as <script src='..'/>
to the page).原来问题是我使用的是作为包安装到
ASP.NET MVC
中的bootstrap
程序(因此它将它作为<script src='..'/>
到页面中)。 So after I:所以在我之后:
npm install --save bootstrap
Added bootstrap: 'bootstrap'
to ProvidePlugin
definition in webpack.config.js
新增
bootstrap: 'bootstrap'
到ProvidePlugin
定义webpack.config.js
require("bootstrap")
into my vue filerequire("bootstrap")
到我的 vue 文件中It started to work.它开始工作了。 I didn't even have to
require 'popper'
for some reason - probably because bootstrap
already contains it?由于某种原因,我什至
require 'popper'
——可能是因为bootstrap
已经包含它?
Though I am still not sure whether this is a proper way to solve the problem虽然我仍然不确定这是否是解决问题的正确方法
Using Vuejs Directive使用 Vuejs 指令
const bsPopover = (el, binding) => {
const p = []
if (binding.modifiers.focus) p.push('focus')
if (binding.modifiers.hover) p.push('hover')
if (binding.modifiers.click) p.push('click')
if (!p.length) p.push('hover')
$(el).popover({
animation: false,
placement: binding.arg || 'top',
trigger: p.join(' '),
html: !!binding.modifiers.html,
content: binding.value,
});}
Vue.directive('tooltip', {
bind: bsTooltip,
update: bsTooltip,
unbind (el) { $(el).tooltip('dispose') }});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.