如何将 jquery 嵌入到 webpack 中的自定义元素并在 web 组件中访问它。我正在使用物化

Question

我使用 materialize 并且我使用的一些 materialize 组件需要 jquery 但是当我把它放在模板中或直接放在渲染函数中时 this.innerHtml 脚本实际上是不可读的并且不'没用。

const template = document.createElement('template');
template.innerHTML = 
`
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        nav {
            position: absolute;
            box-shadow: none;
            transition: 0.5s;
        }
    </style>
    <ul class="sidenav white lighten-2" id="mobile-nav">
        <li><a href="#banner">Home</a></li>
        <li><a href="#info">Info</a></li>
        <li><a href="#data">Data</a></li>
    </ul>   
    <div class="navbar-fixed">
        <nav class="transparent">
            <div class="container">
                <div class="nav-wrapper transparent">
                    <a href="#" class="sidenav-trigger" data-target="mobile-nav">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down transparent">
                        <li><a href="#banner">Home</a></li>
                        <li><a href="#info">Info</a></li>
                        <li><a href="#data">Data</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>

        $(document).ready(function(){
            $('.sidenav').sidenav();
            $(window).scroll(function(){
                if($(window).scrollTop()>400){
                    $('nav').removeClass('transparent');
                    $('nav').addClass('red darken-4');
                }else{
                    $('nav').removeClass('red darken-4');
                    $('nav').addClass('transparent');
                }
            });
        });    

    </script>
`


class AppBar extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({mode : "open"});
        var self = this;

        
        this.render();
        var sidenavs = this.shadowRoot.querySelectorAll('.sidenav')
            for (var i = 0; i < sidenavs.length; i++){
                M.Sidenav.init(sidenavs[i]);
        }
    }


    render() {
        this.shadowRoot.appendChild(template.content.cloneNode(true));        
    }

    

    connectedCallback() {

        
        // this.shadowRoot.addEventListener('DOMContentLoaded', function() {
        //     var elems = this.shadowRoot.querySelectorAll('.sidenav');
        //     var instances = M.Sidenav.init(elems, options);
        // });
        // $(document).ready(function(){
        //     $('.sidenav').shadowRoot().sidenav();
        //     $(window).scroll(function(){
        //         if($(window).scrollTop()>400){
        //             $('nav').removeClass('transparent');
        //             $('nav').addClass('red darken-4');
        //         }else{
        //             $('nav').removeClass('red darken-4');
        //             $('nav').addClass('transparent');
        //         }
        //     });
        // });    
    }

}

customElements.define('app-bar', AppBar);

模板1
我使用 jquery 和自定义元素创建的代码模板 class 2
这个功能我也试过了，也没用3

Answer 1

好的，这是文档的问题，错误的未声明选项变量：

var instances = M.Sidenav.init(elems, options);

更改为：

var instances = M.Sidenav.init(elems);

此外，jQuery 不再依赖 Materializecss，因此您可以始终使用 vanilla JS。

Answer 2

目前 materialize 不支持 webpack jquery..你应该使用 vanilla js 而不是 jquery..你可以看到这个问题的正向解决方案 https://github.com/Dogfalo/materialize/issues/5026

如何将 jquery 嵌入到 webpack 中的自定义元素并在 web 组件中访问它。我正在使用物化

how to embed jquery to custom element in webpack and access it in web component . i'm using materialize

jquery

web-component

materialize

custom-element