vue.js 및 부트스트랩 4를 사용한 팝오버

vue.js 및 부트스트랩 4를 사용한 팝오버

부트스트랩 4의 팝오버를 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>

버튼은 로드 후에만 표시됩니다.버튼에는 다음과 같은 부모 요소가 있기 때문입니다.v-forAjax로 로드된 데이터에 바인딩합니다.

어떻게 요구해야 할지 모르겠습니다.popper회선$('[data-toggle="popover"]').popover()해결(기능을 찾을 수 없음)popover())

회선도const popper = require("poppper")에러에서도 동작하지 않는다.Module parse failed: 'return' outside of function로딩이 안 될 것 같아요popper와 함께require왜냐하면 그것은 그것을 위해 만들어지지 않았기 때문이다.

고군분투하고 무작위로 아이디어를 낸 후에, 나는 효과가 있는 아이디어를 얻었다.알고보니 문제는 제가 이 약을 복용하고 있었다는 것이다.bootstrap인스톨 되어 있다.ASP.NET MVC(그래서 그것을) 묶음으로 추가했다<script src='..'/>페이지까지)를 클릭합니다.그 후:

1. npm install --save bootstrap

2. 추가된bootstrap: 'bootstrap'로.ProvidePlugin의 정의webpack.config.js

3. 추가된require("bootstrap")내 vue 파일로

작동하기 시작했어요.난 그럴 필요도 없었어require 'popper'어떤 이유 때문인지 - 아마 그 이유 때문일 것이다bootstrap이미 들어있나요?

이것이 적절한 문제 해결 방법인지는 아직 잘 모르겠지만

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

언급URL : https://stackoverflow.com/questions/48441722/popover-with-vue-js-and-bootstrap-4