[RESOLVIDO] Botão responsivo - VueJS (TS)

Front-end
#1

Pessoal, eu estou tentando criar um botão responsivo. Eu criei uma opção que aparece a foto dos usuários online na minha página na barra de navegação na parte de cima. Deixei essas fotos circulares e todo mundo que entra nessa página, possuindo ou não uma foto pré-carregada, aparece nessa barra.

O que eu consegui fazer até agora foi que o botão aparecesse ao lado da foto de todo mundo que entra e não consigo armazenar essas informações que eu quero que ele faça.

#2

Tem algum exemplo do que vc quer e do que vc ja tem?

Só imaginando assim fica difícil

#4

nao sei se entendi ainda… É tipo isso?

#5

Isso! Exatamente

#6

show, coloquei la no codesandbox pra vc pegar o código, aqui ia ficar bem extenso.

obs: usei o vue-styled-components, mas vc pode usar o css com as classes tbm.

#7

agora isso… essas pessoas que vc quer armazenar ja estão logadas?

#8

sim. eu tentei pegar o teu código e não aparece porque as pessoas já estão logadas na página. eu apenas iria pegar essas fotos e jogar no botão

#9

E esses valores vêm do banco de dados? Como q ta acontecendo? Compartilha o código aí, não tenha vergonha não :joy:

#11

show, essa funcao usuariosOnline() retorna a lista de users com uma imagem, certo?! Aí só precisa trocar a variável users que fiz lá por essa: usuariosOnline

#12

Isso! Muito obrigada mesmo! Só uma dúvida adicional, pq eu não conhecia, o que seria esse limit, que retorna um boolean e um number?

1 curtida
#13

Deu certo?!

É só uma variavel que fiz mesmo, poderia ter qualquer nome…

Fiz ela pra a gente poder controlar quantas pessoas poderiam aparecer naquela lista caso a gente quisesse ativar a funcionalidade.

Então se o status for true, o array vai mostrar de 0-3 itens.

Outra forma de chamar essa variavel, (acho que assim fica melhor o entendimento kkkkk)

collapseOnlineUsers: { 
   isActive: true, 
   maxUsers: 3 
};
#14

infelizmente não. está dando esse erro: Property ‘limit’ does not exist on type :confused:

#15

É q vc tá usando ts né, aí sintaxe pra declarar deve ser diferente. Qual versão do vue vc tá usando?

#16

seria a 4.5.15

#17

bom dia.

me mostra por favor como vc fez o seu script. O export default...

#18

O problema foi resolvido desta forma:

<template>
  <layout>
    <container>
      <list-people>
        <div v-for="(user, index) of usersShow" :key="index">
          <div class="profile-image">
            <img :src="user.avatar" draggable="false" :alt="user.name"/>
            <div v-if="user.status === 'online'" class="green-dot"/>
          </div>

          <p>
            {{ user.name }}
          </p>
        </div>

        <button v-if="limit.status" class="more-button" @click="showMore()">
          +
        </button>
        <button v-else class="more-button" @click="showLess()">-</button>
      </list-people>
    </container>
  </layout>
</template>

<script lang="ts">
import {Container, Layout, ListPeople} from "./styles";
import {defineComponent} from "vue";

interface Limit {
  status: boolean
  qtd: number
}

interface UserOnline {
  name: string
  avatar: string
  status: string
  role?: string
}

export default defineComponent({
  name: "WidgetBarOnline",
  components: {
    Layout,
    Container,
    ListPeople
  },
  data() {
    return {
      limit: {
        status: true,
        qtd: 3
      } as Limit,
      membroslogados: [
        {
          name: "Abner Rodrigues",
          avatar: "https://github.com/rodriguesabner.png",
          role: "moderator"
        },
        {
          name: "Fulano",
          avatar: "https://i.pravatar.cc/150?img=1",
          status: "online",
          role: "user"
        },
        {
          name: "Bizarro",
          avatar: "https://i.pravatar.cc/150?img=3",
          status: "online",
          role: "user"
        },
        {
          name: "Bizarro",
          avatar: "https://i.pravatar.cc/150?img=3",
          status: "online",
          role: "user"
        },
        {
          name: "Bizarro",
          avatar: "https://i.pravatar.cc/150?img=3",
          status: "online",
          role: "user"
        },
      ] as UserOnline[]
    };
  },
  computed: {
    usersShow(): any {
      if (this.limit.status) {
        return this.membroslogados.slice(0, this.limit.qtd);
      } else {
        return this.membroslogados;
      }
    }
  },
  methods: {
    showMore() {
      this.limit.status = false;
    },
    showLess() {
      this.limit.status = true;
    },
  }
});
</script>
#19