quantidade-produto v1.0.0
Quantidade Produto
Sobre
Componente para manipular a quantidade do produto a ser comprado. Muito usado em detalhe produto, lista de compras aberta e carrinho lateral.
Instalação
- Instale o app através do seu terminal
npm install @wapstore/quantidade-produto- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/quantidade-produto": "0.0.6"
}Agora a loja está apta para o uso da aplicação.
Uso
O componente de Quantidade Produto pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.
Exemplo
-Este é um exemplo da aplicação de um arquivo padrão para um Quantidade em página de produto:
<template>
...
</template>
<script>
import QuantidadeProduto from '@wapstore/quantidade-produto';
...
</script>
<style>
...
</style>Recursos
Props
| Props | Descrição | Tipo |
|---|---|---|
quantidade 0.0.6 | Coloque aqui a variavel quantidade do seu produto. O componente fará alteração na quantidade com base nessa propriedade. | Number |
estoque 0.0.6 | Defina o estoque do produto conforme o retornado pela API. | Number |
Slots
| Slot | Descrição | Name | Exemplo de uso |
|---|---|---|---|
Botão de diminuir 0.0.6 | Use esse slot para definir seu botão personalizado de diminuir a quantidade. | btnDiminuir | <quantidadeProduto> <template #btnDiminuir> <button> /*...*/ </button> </template> </quantidadeProduto> |
Label do botão diminuir 0.0.6 | Use esse slot para alterar somente o label do botão diminuir. | labelBtnDiminuir | <quantidadeProduto> <template #labelBtnDiminuir> <button> /*...*/ </button> </template> </quantidadeProduto> |
Input 0.0.6 | Use esse slot colocar um input personalizado no centro do componente. | input | <quantidadeProduto> <template #input> <button> /*...*/ </button> </template> </quantidadeProduto> |
Botão de soma 0.0.6 | Use esse slot para definir um botão de soma personalizado. | btnSomar | <quantidadeProduto> <template #btnSomar> <button> /*...*/ </button> </template> </quantidadeProduto> |
Label para o botão somar 0.0.6 | Use esse slot para alterar o label dentro do botão soma. | labelBtnSomar | <quantidadeProduto> <template #labelBtnSomar> <button> /*...*/ </button> </template> </quantidadeProduto> |
Eventos
| Eventos | Descrição | Argumentos |
|---|---|---|
changeQuantidade 0.0.6 | Disparado toda vez que o valor da quantidade for alterado. | newQuantidade: Descrição: Novo valor de quantidade. Tipo: Number |
initQuantidadeProduto 0.0.6 | Primeira renderização no DOM do componente. | element: Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |
updatedQuantidadeProduto 0.0.6 | Toda atualização no DOM. | element: Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |
Estilização
Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.
1 year ago