使用 vue.js 和 bootstrap 4 弹出窗口

Question

我正在尝试将 bootstrap 4 中的弹出窗口添加到我的 vue.js 应用程序中。 我可能可以使用类似https://www.npmjs.com/package/vue-popperjs东西，但我想让它以旧方式工作，而不使用额外的库（这样我才能弄清楚如何这样做）

我已经使用npm install --save popper安装了Popper.js

在我的webpack.config.js我也有：

 plugins: [
        new WebpackNotifierPlugin(),
        new webpack.ProvidePlugin({
            _: 'lodash',
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery',
            jQuery: 'jquery',
            popper: 'popper'
        })
    ],

然后我正在尝试构建一个 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>

该按钮仅在加载后才会出现，因为它有一个父元素，该元素对使用 ajax 加载的数据进行了v-for绑定。

我不知道如何要求popper ，所以行$('[data-toggle="popover"]').popover()解决了（它找不到函数popover() ）

此外，行const popper = require("poppper")也不起作用，错误Module parse failed: 'return' outside of function 。 我的猜测是我不能用require加载popper ，因为它不是为它构建的。

Answer 1

经过一番挣扎和尝试完全随机的想法之后，我有了一个有效的想法。 原来问题是我使用的是作为包安装到ASP.NET MVC中的bootstrap程序（因此它将它作为<script src='..'/>到页面中）。 所以在我之后：

1. npm install --save bootstrap

2. 新增bootstrap: 'bootstrap'到ProvidePlugin定义webpack.config.js

3. 将require("bootstrap")到我的 vue 文件中

它开始工作了。 由于某种原因，我什至require 'popper' ——可能是因为bootstrap已经包含它？

虽然我仍然不确定这是否是解决问题的正确方法

Answer 2

使用 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') }});