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