Laravel 6- Bootstrap Почему Popover не работает, пока нет ошибок? - PullRequest
Новая
       30

Laravel 6- Bootstrap Почему Popover не работает, пока нет ошибок?

0 голосов
/ 13 марта 2020

В настоящее время я изучаю laravel через разработку приложений. Я много чего делал в бэкэнде, но все еще переживал тяжелые времена, когда сталкивался с проблемой внешнего интерфейса. Я использую bootstrap строительные леса и хочу создать форму в 'popover'. Я могу сделать это позже, теперь я просто хочу проработать эту кнопку. Я использую поповер, который показан на сайте bootstrap. Popover Bootstrap Я просто помещаю кнопку на странице и хочу, чтобы при нажатии на нее появлялось всплывающее окно. 

<button type="button" class="btn btn-secondary" data-container="body"
                        data-toggle="popover" data-placement="left"
                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on left

Когда я использую { {asset ('js / app. js')}} (я имею в виду локальный файл в public / js /), я не могу заставить его работать. Но когда я использую эти сценарии cdn: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

, а также добавляю этот сценарий внизу тела, когда я использую cdn: 

$(function () { $('[data-toggle="popover"]').popover()})

Это работает. Но это не может быть решением, я хотел бы продолжать использовать мои внутренние файлы, а не импортированные из cdn. Согласно моим прочтениям и наблюдениям, в приложении js эти скрипты / функции уже включены. В этом случае должно быть достаточно только указания пути приложения. js, как указано выше в файле блейда. (Я запускаю 'npm install popper. js --save' также). Я хотел бы иметь способ работать с этой кнопкой с внутренними js файлами.

Дополнительно: когда я набираю 'Popper' на консоли, он отвечает мне следующей строкой кода. Итак, как я понимаю, это определено. 

Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate…

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Хорошо, проблема решена очень интересным способом, который я не понимаю. Пожалуйста, поделитесь своими комментариями, если у вас есть идея еще. Я удалил все сценарии cdn, добавил window.Jquery = require('jquery'); в файл resources / js / bootstrap. js и сохранил сценарий $(function () { $('[data-toggle="popover"]').popover()}). Чем я бегу npm run dev, после этого все заработало. Это не имело смысла, потому что в том же файле есть кодовая строка, которая включает jquery, как я понимаю: try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. После этого я удалил строку, которую я добавил в начале window.Jquery = require('jquery');, и снова запустил npm run dev, и это все еще работает. Теперь есть две вещи, о которых я могу думать: во-первых; Как только я добавил window.Jquery = require('jquery'); и начал npm run dev, что-то сделал с одним из моих файлов, и удаление этой строки сейчас не имеет значения, или ничего особенного здесь не произошло, я просто сделал что-то неправильно, прежде чем открыть эту топику c. Спасибо.

0 голосов
/ 13 марта 2020

У вас есть window.Popper = require('popper.js').default; в вашем resources/js/bootstrap.js или в resources/js/app.js файле?

Может быть, вы могли бы опубликовать код из ваших bootstrap и приложений js файлов?

...