没有办法仅使用Astro动态创建组件? 我正在从事一个Astro项目,我正在建造经典的Pokédex。我有一个pokemoncard.astro组件,可以呈现神奇宝贝的详细信息,当A&...

问题描述 投票:0回答:1
--- import Layout from '../layouts/Layout.astro'; import PokemonCard from '../components/PokemonCard.astro'; import { getPokemons } from '../lib/controllers/pokemonController'; import type { PokemonSmall } from '../lib/models/pokemonModels'; const pokemons: PokemonSmall[] | undefined = await getPokemons(0, 12); --- <Layout title="Pokedex"> <main class="m-auto"> <section id="pokemon-grid"> <div class="grid grid-cols-2 gap-7 p-2 mt-32 md:grid-cols-4"> { pokemons?.map((pokemon : PokemonSmall) => ( <PokemonCard {pokemon}/> )) } </div> </section> <section class="flex justify-center items-center"> <button id="load-more-pkmn" class="p-4 bg-slate-400/20 border-gray-500 border rounded-2xl my-4 transition-transform transform hover:scale-105">Cargar más pokémons</button> </section> </main> </Layout> <script> import { getPokemons } from "../lib/controllers/pokemonController"; import { TypeColors, type PokemonSmall, type PokemonType } from "../lib/models/pokemonModels"; import { capitalizeFirstLetter, mapId } from "../lib/utils/utils"; let offset = 12; const limit = 12; const loadMorePkmn = document.getElementById('load-more-pkmn'); if(loadMorePkmn) { loadMorePkmn.addEventListener('click', async () => { const pokemons : PokemonSmall [] | undefined = await getPokemons(offset, limit); offset += 12; const pokemonGrid = document.getElementById('pokemon-grid'); const divPokemons = document.createElement('div'); divPokemons.className = 'grid grid-cols-2 gap-7 p-2 md:grid-cols-4'; pokemons?.map((pokemon : PokemonSmall) => { console.log(pokemon) const a = document.createElement('a'); a.className = 'w-60 h-60 p-1 flex flex-col items-center bg-slate-400/10 border-gray-500 border rounded-2xl hover:bg-gray-200 cursor-pointer'; const image = document.createElement('img'); image.className = 'w-28'; const h3 = document.createElement('h3'); h3.className = 'text-2xl font-bold tracking-wide mt-1'; const p = document.createElement('p'); p.className = 'text-xs tracking-wide p-1'; const divTypes = document.createElement('div'); divTypes.className = 'flex flex-row space-x-1 mt-2 p-1 gap-2'; a.href = `pokemon/${pokemon.id}`; image.src = pokemon.image; image.alt = `Una foto de ${pokemon.name}`; a.appendChild(image); h3.innerText = capitalizeFirstLetter(pokemon.name); a.appendChild(h3); p.innerText = `No. ${mapId(pokemon.id)}`; a.appendChild(p); pokemon.types.map((types : PokemonType) => { const pType = document.createElement('p'); pType.className = ` ${TypeColors[types.type.name]} opacity-80 rounded text-white text-center font-medium tracking-wide py-1 px-2`; pType.innerText = types.type.name; divTypes.appendChild(pType); }); a.appendChild(divTypes); divPokemons.appendChild(a); }); pokemonGrid?.appendChild(divPokemons); }); } </script>

我考虑使用诸如react或vue之类的前端框架,但如果可能的话,我想坚持使用。

hatml是HTML

DialogElement

(在所有现代浏览器中)和popoverAttribute
(在Firefox,Chrome和Safari中> = 17)。
或者,您可以在Astro组件中通常为口袋妖怪创建HTML,但请使用CSS隐藏。然后,您只需添加几行JavaScript即可:
<button id="showMoreBtn">Show more</button> <div id="pokemon" style="display: hidden;"> {pokemons.map(pokemon => <PokemonCard pokemon={pokemon}/>} </div> <script> document.getElementById('showMoreBtn')?.addEventListener('click', () => { document.getElementById('pokemon').style.display = 'block'; }) </script>

javascript typescript astrojs
1个回答
0
投票
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.