Laravel 9 + vite.js + jquery + bootstrap不容易开箱即用

0yg35tkg  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(161)

在过去的几个小时里,我努力让jquery工作,引导弹出框和工具提示在vite.js上的laravel 9中的刀片文件中工作。顺便说一句,我是Laravel的新手。
我找了很多答案,但没有任何具体的地方。所以我最终从我找到的各种代码中找到了一个解决方案。
考虑到你已经有一个运行在Laravel 9上的vite.js服务器,并且你已经安装了jquery和bootstrap

npm install jquery
npm install bootstrap

字符串
首先,如果你想让jquery工作,你必须声明script标签type=“module”如下:

<script type="module">
    $('#test').addClass('fun');    
</script>


以下是如何让弹出框和工具提示正常工作的方法:
在resources/js/bootstrap.js中

import $ from "jquery";
window.$ = $;

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;


在file.blade.php中,以下是如何在页面中全局启用工具提示

<script type="module">
    $(function () {
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
         return new bootstrap.Tooltip(tooltipTriggerEl)
    })
});


这是在Laravel vite.js blade文件中实现工具提示和弹出框的正确方法吗?

btxsgosb

btxsgosb1#

我遇到了同样的问题,可悲的是,似乎互联网上的资源仍然有限,直到这一点。
这就是解决我问题的方法。
结果是,我们不能以这种方式初始化工具提示:

$('.MyElement').tooltip();

字符串
相反,我使用下面来自bootstrap文档页面的代码来全局初始化工具提示。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })


在此之后,工具提示在Laravel 9 + Vite上工作。

相关问题