Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Gracias a la librería CSSGram podemos añadir filtros al estilo Instagram a nuestras imágenes de VueTalk.
  • Primero la cargaremos de forma globa en nuestro index.html a través de la etiqueta link con <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">.
  • Después podemos añadir la lista de filtros en nuestro módulo messages compo propiedad filters.
  • Acto seguido necesitaremos un nuevo modal que permite revisar la imagen y sus filtros antes de seleccionar uno. Lo llamaremos FilterModalComponent.
  • Hacemos uso de él en el método onFileChange de nuestra vista ViewRoom.
async onFileChange(event) {
  ...
  this.filter = await this.$store.dispatch("utils/requestConfirmation", {
    props: {
      message: "Select your filter",
      file: this.message#Photo,
      filters: this.$store.state.messages.filters
    },
    component: "FilterModal"
  });
},
  • Ahora debemos ajustar la acción createMessage del módulo messages para que acepte la nueva propiedad audio.

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


Cloud Functions ☁


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue