Ya casi hemos terminado la vista de Profile. Para terminar el (gran) componente de MainBlock nos queda una última cosa y ya podríamos pasar al componente de los artesanos.
Lo que vamos a implementar ahora es que cuando hagamos click en un héroe, tanto si haces click en el rostro del hero en TopHeroe o en HeroIco (primera columna de la tabla), cambiemos a la ruta de detalle del héroe, es decir, a la vista Hero.
Para refrescar contenidos, estas son las rutas que habíamos definido:
Queremos que al hacer click en la "cara" de un hero, la app cambie de ruta y cargue la vista de Hero. Tenemos dos casos en los que controlar este comportamiento, por lo tanto, para reutilizar, vamos a crear un mixin que, más tarde, lo usaremos en múltiples componentes.
Creamos nuestro mixin en la carpeta /mixins. Como se trata de una función (method) que va a navegar a la vista del hero, podemos llamarle goToHero.js. Va a tener este contenido:
exportdefault{methods:{/**
* Go to hero Id
* @paramheroId{String | Number} */goToHero(heroId){// Sacar los datos de la URLconst{ region, battleTag }=this.$route.params// Navegar a la ruta "Hero"this.$router.push({name:'Hero',params:{ region, battleTag, heroId }})}}}
Para poder usarlo, primero lo importamos y después lo declaramos en el componente. Vamos a usarlo en dos componentes:
Si pruebas a hacer click en estos elementos, debería funcionarte y cambiarte de vista.
Sin embargo, tenemos un problema que tal vez hayas visto. La interfaz no es muy intuitiva, pues cuando pasamos el ratón por encima, el cursor no cambia a pointer 👆.
Podemos solucionarlo con una clase de CSS. Vamos a crear una clase CSS en nuestro fichero global de estilos CSS /assets/css/main.styl.
¡Estupendo! El componente MainBlock ya está listo (¡Por fin!). Podemos pasar a desarrollar el componente de los artesanos.
Y en cuanto terminemos con los artesanos podríamos dar por finalizada esta vista, la vista Profile.
ArtisansBlock
Este componente es también bastante sencillo: va a mostrar datos básicos de los tres artesanos (herrero, joyero y mística).
Para empezar, vamos a crear todos los archivos necesarios. Dentro de la carpeta /views/Profile, al mismo nivel que /MainBlock, creamos una nueva llamada /ArtisansBlock. Dentro de esta creamos Index.vue y ArtisanItem.vue.
Ahora toca actualizar el componente vista /views/Profile/Index.vue, y agregarle el nuevo componente de ArtisansBlock que acabamos de crear.
/views/Profile/Index.vue
En el bloque de JavaScript, importamos y habilitamos el componente (as usual):
El componente está recibiendo artisansData como prop. Vamos a crear una computed property que genere el objeto que necesitamos, los datos de los tres artesanos y en los dos modos (normal y hardcore):
> 😎 Truqui: si estás en MacOS, puedes pulsar la combinación de teclas Control + Cmd + Tecla Espacio para sacar un selector de emojis. 👇
> ¿Eres usuario de Windows? Con la combinación Win + . puedes hacer lo mismo 😉
Hemos creado un array con tres items. Cada item corresponde a un artesano. Cada uno tiene los dos datos de su tipo que ha recibido de las props.
Además, le hemos dado un color, un emoji y un ícono (icon, que hace referencia a FontAwesome, la librería de íconos que ya conoces)
El objeto que hemos generado con la computed property, que es el que se va a usar para iterar y generar los tres componentes de artesanos dinámicamente, tiene este contenido:
El HTML lo explicamos un poquito más, aunque es muy simple, ya verás. ¿Recuerdas que hablamos de los emojis anteriormente? En esta ocasión le estamos pasando, a través de las props, ¡emojis al componente! 😏
¿Cuál te gusta más? ¿Cuál crees que es mejor? Deja tus comentarios y explica tu respuesta.
La decisión es tuya, tú eliges con que opción te quedas. En mi caso voy a usar la opción uno, la de los emojis.
¡Maravilloso! 🎉 Hemos terminado con la vista de Profile. Ahora debemos continuar con la vista de detalle del héroe, donde cargaremos los items y los skills de nuestro personaje.
Lo vemos en el siguiente tema.
A mi me gusta más la opción de los emojis pero por cuestiones de que la página se vea igual para todos es mejor usar los íconos de FontAwesome, porque si alguien mira la página desde un dispositivo que no tiene esos íconos no le aparecería nada jaja
interesante, eso no lo sabia, gracias
¿Qué opción has usado y por qué? Deja tu respuesta aquí: 👇
Yo me quedo con la opción uno, creo es mas colorida !
La opción de los emojis me parece que se ve mejor, por lo menos para mi.
Me gustaron mas los emojis se ven mas elegantes
Misma opción que use yo :DD
Excelente lectura, de momento me quedo con la opción #1 para variar, ya que usualmente se suele hacer uso del mecanismo tradicional #2, les coparto mi proyecto aunque sin hacer mis ajustes personales como es de costumbre:
¡Bien ahí!
Decidí dejar los font awesome para dar un toque uniforme a la app.
Así miraremos el mismo resultado en cada cliente.
Sabia decisión, me la apunto. Sin embargo, para que pudieran ver que con emojis también se podía trabajar, decidí dejarlo con emojis, en vez de font-awesome.
Pero está claro que para un cliente o un proyecto más formal, siempre usaría la opción que propones.
Me quede con la opción 2, se me hizo más elegante.
Lectura número 21 mi odio hacía el corrector de lint sigue en aumento, mi único guía y salvador ha sido npm run lint
Me gusto mas con iconos pero se me hace mas profesional con Font al final lo deje con los iconos.
