如何在 Nuxt 中使用猫头鹰旋转木马？

Question

我想让脚本在每个页面上都可以运行，而无需加载这些页面； 我的静态文件夹中有 owl caroussel 脚本，我已经将它放在了 nuxt.config.js 中，这里是如何放置的：

head: {
    title: 'title',
    htmlAttrs: {
        lang: 'en'
    },
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [{
            src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/main-script.js",
            type: "text/javascript"
        }
    ]
},

我的 main-script.js 上有脚本：

$(document).ready(function() {

$('.owl-menu').owlCarousel({
    loop: true,
    responsiveClass: true,
    center: true,
    items: 6,
    nav: true,
    dots: false,
    autoWidth: true,
    responsive: {
        600: {
            items: 6,
            nav: true,
            autoWidth: true,
            center: true,
            loop: true
        },
    }
})

$('.owl-video').owlCarousel({
    loop: true,
    center: true,
    items: 3,
    margin: 10,
    nav: true,
    dots: true,
    responsive: {
        600: {
            items: 3,
            margin: 12,
        },
    },
    navContainer: "#nav-conte",
    navText: [
        '<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
        '<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
    ]
})
})

如果页面已加载，轮播在页面上运行良好，但如果来自 nuxt 导航，则轮播脚本不再工作。

---

我使用的解决方案是查看 DOM 变化的 MutationObserver；在我的main-script.js：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // my owl caroussel script
});

observer.observe(document, {
    subtree: true,
    attributes: true
});

Answer 1

在这里，您使用了一些依赖于选择 DOM 特定部分的 jQuery 代码。同时，现在的前端框架确实以不同的方式处理 DOM，并且更多地依赖于状态或refs，而不是实际的querySelector。

因此，我什至不建议尝试接线。您可能应该尝试使用 Vue 包来制作相同类型的功能。
它可能会更轻（捆绑大小），更容易与您的 Nuxt 应用程序集成，并且您不会依赖错误和 hacky 行为。

查看此轮播列表：https://github.com/vuejs/awesome-vue#carousel

我确实使用vue-awesome-swiper，更多的是更重的一面，但真的很完整。

---

另外，我不知道您是否真的需要在 Vue 之上的 Nuxt 应用程序中安装 jQuery，但如果您想要一种干净简单的方式将其安装到您的 Nuxt 应用程序中，请在此处遵循我的其他答案： https://stackoverflow.com/a/68414170/8816585

---

编辑，甚至 owl carousel deprecates itself 如你所见