Question

我试图将bootstrap 4中的popovers添加到我的vue.js应用中。我可以使用像https://www.npmjs.com/package/vue-popperjs这样的东西，但是我想让它以旧的方式工作，而不使用额外的库（这样我就可以弄清楚如何做到这一点的原理）

我已使用Popper.js

安装了npm install --save popper

在我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一起使用。我的猜测是我无法使用popper加载require，因为它不是为它而构建的。

Answer 1

经过一番挣扎和尝试完全随机的想法，我有一个有效的。结果问题是我使用final NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(Context context, String channelId); Notification notification = mBuilder.setSmallIcon(icon).setTicker(title).setWhen(0) .setAutoCancel(true) .setContentTitle(title) .setContentIntent(resultPendingIntent) .setSound(alarmSound) .setStyle(bigPictureStyle) .setWhen(getTimeMilliSec(timeStamp)) .setSmallIcon(R.mipmap.ic_launcher) .setLargeIcon(BitmapFactory.decodeResource(mContext.getResources(), icon)) .setContentText(message) .build();作为一个捆绑包安装到bootstrap（因此它将ASP.NET MVC添加到页面中）。所以在我之后：

<script src='..'/>
在npm install --save bootstrap

bootstrap: 'bootstrap'

ProvidePlugin

将webpack.config.js添加到我的vue文件

它开始起作用了。我出于某种原因甚至没有require("bootstrap") - 可能是因为require 'popper'已经包含它了？

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

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

弹出与vue.js和bootstrap 4

2 个答案: