Soy nuevo en webpack y pug. Trabajando en una pequeña tarea y
aquí está el enlace a mi webpack.config ingrese la descripción del enlace aquí
aquí está mi archivo json ingrese la descripción del enlace aquí
en el archivo PUG uso una función como esta:
.searchbox-drop button(href="#" data-dropdown='drop1' onclick='dropDown()' aria-controls='drop1' aria-expanded=false class='dropbtn') Вce +image('triangle','searchbox-drop__icon' )en index.js
import $ from "jquery"; import 'bootstrap'; import './styles/index.scss'; import {dropDown} from './drop.js'; window.dropDown = dropDown();en drop.js
export function dropDown(){ function show() { document.getElementById('myDropdown').classList.toggle('show'); } //close dropdown id the user cliks outside of it window.onclick = function(e){ if(!e.target.matches('.dropbtn')){ var myDropdown = document.getElementById('myDropdown'); if(myDropdown.classList.contains('show')){ myDropdown.classList.remove('show'); } } }}
aquí hay parte del complemento PUG en el archivo CONFIG:
new HtmlWebpackPlugin({ filename: 'index.pug' , minify: false, scriptloading:'blocking', inject:'body' }), new HtmlWebpackPugPlugin()y aquí está index.pug
include pug/libs/_libs include pug/_mixins doctype html html(lang='en') include pug/_head body include pug/_header block contentNo sé lo que hice, pero ahora incluso tengo este error cuando hago clic en btn ingresa la descripción de la imagen aquí .
Intente asignar la función sin invocarla.
window.dropDown = dropDown;Tal vez esto es lo que quieres...
export function dropDown() { document.getElementById('myDropdown').classList.toggle('show'); } //close dropdown id the user clicks outside of it window.onclick = function(e){ if(!e.target.matches('.dropbtn')){ var myDropdown = document.getElementById('myDropdown'); if(myDropdown.classList.contains('show')){ myDropdown.classList.remove('show'); } } }Gracias a Steven, finalmente hice algunos cambios que resolvieron un problema. en index.js va como:
import $ from "jquery"; import 'bootstrap'; import './styles/index.scss'; import {show} from './drop.js'; window.show= show; window.onclick = function(e){ if(!e.target.matches('.dropbtn')){ var myDropdown = document.getElementById('myDropdown'); if(myDropdown.classList.contains('show')){ myDropdown.classList.remove('show'); } } }y en index.pug:
onclick = 'show()'