Planet Alpha

Um layout de grade arrastável e redimensionável, para Vue.js

Blog

Um layout de grade arrastável e redimensionável, para Vue.js

vue-grid-layout

vue-grid-layout é um sistema de layout de grade, como Gridster , para Vue.js. Fortemente inspirado por React-Grid-Layout



Versão Atual: * 2.3.7 (Suporta Vue 2.2+)

Para Vue 2.1.10 e abaixo, use a versão 2.1.3

Para Vue 1 use a versão 1.0.3

[ Demo | Changelog ]





Inglês | chinês



todas as bibliotecas com.android.support devem usar exatamente a mesma especificação de versão

Projetos usando vue-grid-layout

Conhece outros? Crie um PR para me informar!



Recursos

  • Widgets arrastáveis
  • Widgets redimensionáveis
  • Widgets estáticos
  • Verificação de limites para arrastar e redimensionar
  • Os widgets podem ser adicionados ou removidos sem reconstruir a grade
  • O layout pode ser serializado e restaurado
  • Suporte RTL automático (redimensionamento não funciona com RTL em 2.2.0)
  • Responsivo

Começando

Instalação

acima do nível do mar

# install with npm npm install vue-grid-layout --save # install with yarn yarn add vue-grid-layout

Importar a biblioteca





import VueGridLayout from 'vue-grid-layout';

Adicionar a outros componentes Vue

export default { components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem }, // ... data, methods, mounted (), etc. }

navegador

Inclui o pacote pronto para navegador (baixe de lançamentos ) em sua página. Os componentes estarão disponíveis automaticamente.

Uso

var testLayout = [ {'x':0,'y':0,'w':2,'h':2,'i':'0'}, {'x':2,'y':0,'w':2,'h':4,'i':'1'}, {'x':4,'y':0,'w':2,'h':5,'i':'2'}, {'x':6,'y':0,'w':2,'h':3,'i':'3'}, {'x':8,'y':0,'w':2,'h':3,'i':'4'}, {'x':10,'y':0,'w':2,'h':3,'i':'5'}, {'x':0,'y':5,'w':2,'h':5,'i':'6'}, {'x':2,'y':5,'w':2,'h':5,'i':'7'}, {'x':4,'y':5,'w':2,'h':5,'i':'8'}, {'x':6,'y':3,'w':2,'h':4,'i':'9'}, {'x':8,'y':4,'w':2,'h':4,'i':'10'}, {'x':10,'y':4,'w':2,'h':4,'i':'11'}, {'x':0,'y':10,'w':2,'h':5,'i':'12'}, {'x':2,'y':10,'w':2,'h':5,'i':'13'}, {'x':4,'y':8,'w':2,'h':4,'i':'14'}, {'x':6,'y':8,'w':2,'h':4,'i':'15'}, {'x':8,'y':10,'w':2,'h':5,'i':'16'}, {'x':10,'y':4,'w':2,'h':2,'i':'17'}, {'x':0,'y':9,'w':2,'h':3,'i':'18'}, {'x':2,'y':6,'w':2,'h':2,'i':'19'} ]; new Vue({ el: '#app', data: { layout: testLayout, }, }); {{item.i}}

Documentação

Propriedades

GridLayout

  • layout

    • tipo: Array
    • obrigatório: true

    Este é o layout inicial da grade.

    O valor deve ser Array de Object Itens. Cada item deve ter i, x, y, w e h propriedades. Consulte a documentação para GridItem abaixo para mais informações.

  • colNum

    • tipo: Number
    • obrigatório: false
    • padrão: 12

    Diz quantas colunas a grade tem.

    O valor deve ser um número natural .

  • altura da linha

    • tipo: Number
    • obrigatório: false
    • padrão: 150

    Diz o que é a altura de uma única linha em pixels.

  • maxRows

    • tipo: Number
    • obrigatório: false
    • padrão: Infinity

    Diz qual é o número máximo de linhas na grade.

  • margem

    • tipo: Array
    • obrigatório: false
    • padrão: [10, 10]

    Diz quais são as margens dos elementos dentro da grade.

    O valor deve ser de dois elementos Array de Number. Cada valor é expresso em pixels. O primeiro elemento é uma margem horizontalmente, o segundo elemento é uma margem vertical.

  • isDraggable

    • tipo: Boolean
    • obrigatório: false
    • padrão: true

    Diz se os itens da grade podem ser arrastados.

  • isResizable

    • tipo: Boolean
    • obrigatório: false
    • padrão: true

    Diz se os itens das grades são redimensionáveis.

  • isMirrored

    • tipo: Boolean
    • obrigatório: false
    • padrão: false

    Diz se o RTL / LTR deve ser revertido.

  • tamanho automático

    • tipo: Boolean
    • obrigatório: false
    • padrão: true

    Diz se a altura do contêiner deve aumentar e contrair para caber no conteúdo.

  • verticalCompact

    • tipo: Boolean
    • obrigatório: false
    • padrão: true

    Diz se o layout deve ser compacto verticalmente.

  • preventCollision

    • tipo: Boolean
    • obrigatório: false
    • padrão: false

    Diz se os itens da grade se moverão ao serem arrastados.

  • useCssTransforms

    • tipo: Boolean
    • obrigatório: false
    • padrão: true

    Diz se o CSS transition-property: transform; deve ser usado.

  • responsivo

    • tipo: Boolean
    • obrigatório: false
    • padrão: false

    Diz se o layout deve ser adequado à largura da janela

  • pontos de interrupção

    • tipo: Object
    • obrigatório: false
    • padrão: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}

    Pontos de interrupção definidos para layout responsivo. Define as larguras em que o número da coluna muda

  • cols

    • tipo: Object
    • obrigatório: false
    • padrão: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}

    Define o número de colunas para cada ponto de interrupção

GridItem

  • eu

    • tipo: String
    • obrigatório: true

    Este é o identificador exclusivo do item.

  • x

    • tipo: Number
    • obrigatório: true

    Diz qual é a posição horizontal inicial do item (em qual coluna ele deve ser colocado).

    O valor deve ser um número inteiro .

  • e

    • tipo: Number
    • obrigatório: true

    Diz qual é a posição vertical inicial do item (em qual linha ele deve ser colocado).

    O valor deve ser um número inteiro .

  • no

    • tipo: Number
    • obrigatório: true

    Diz qual é a largura inicial do item.

    O valor é um número multiplicado por colWidth.

  • h

    onde comprar velo
    • tipo: Number
    • obrigatório: true

    Diz qual é a altura inicial do item.

    O valor é um número multiplicado por rowHeight.

  • minW

    • tipo: Number
    • obrigatório: false
    • padrão: 1

    Diz qual é a largura mínima do item. Se w será menor que minW depois w será definido como minW.

    O valor é um número multiplicado por colWidth.

  • brilhante

    • tipo: Number
    • obrigatório: false
    • padrão: 1

    Diz o que é um peso mínimo do item. Se h será menor que minH depois h será definido como minH.

    O valor é um número multiplicado por rowHeight.

  • maxW

    • tipo: Number
    • obrigatório: false
    • padrão: Infinity

    Diz qual é a largura máxima do item. Se w será maior que maxW depois w será definido como maxW.

    O valor é um número multiplicado por colWidth.

  • maxH

    • tipo: Number
    • obrigatório: false
    • padrão: Infinity

    Diz qual é a altura máxima do item. Se h será maior que maxH depois h será definido como maxH.

    O valor é um número multiplicado por rowHeight

  • isDraggable

    • tipo: Boolean
    • obrigatório: false
    • padrão: null

    Diz se o item pode ser arrastado.

    Se o valor padrão for null então é herdado dos pais.

  • isResizable

    • tipo: Boolean
    • obrigatório: false
    • padrão: null

    Diz se o item é redimensionável.

    Se o valor padrão for null então é herdado dos pais.

  • estático

    • tipo: Boolean
    • obrigatório: false
    • padrão: false

    Diz se o item é estático (não pode ser arrastado, redimensionado ou movido por outros itens).

  • dragIgnoreFrom

    conversor online de voz passiva para voz ativa
    • tipo: String
    • obrigatório: false
    • padrão: 'a, button'

    Diz quais elementos do item não devem acionar o evento de arrastar do item.

    O valor é css-like seqüência do seletor.

    Para obter mais informações, consulte ignoreFrom no interact.js docs .

  • dragAllowFrom

    • tipo: String
    • obrigatório: false
    • padrão: null

    Diz quais elementos do item devem acionar o evento de arrastar do item.

    O valor é css-like seqüência do seletor.

    Se null então, pode-se arrastar por qualquer (excluindo dragIgnoreFrom) elemento do item.

    Para obter mais informações, consulte allowFrom no interact.js docs .

  • resizeIgnoreFrom

    • tipo: String
    • obrigatório: false
    • padrão: 'a, button'

    Diz quais elementos do item não devem acionar o evento de redimensionamento do item.

    O valor é css-like seqüência do seletor.

    Para obter mais informações, consulte ignoreFrom no interact.js docs .

Eventos

Mover e redimensionar ouvintes de eventos podem ser adicionados a cada item da grade, para que o Vue pai possa ser notificado quando um elemento da grade estiver sendo movido ou redimensionado. Ouvintes de eventos movidos e redimensionados podem ser adicionados, se a única notificação necessária for quando um item for movido ou redimensionado.

Exemplo de trabalho aqui

{{item.i}}

  • layoutCreatedEvent

    Layout criado evento

    Emitido no gancho do ciclo de vida criado pelo componente

layoutCreatedEvent: function(newLayout){ console.log('Created layout: ', newLayout) }

  • layoutBeforeMountEvent

    Layout beforeMount event

    Emitido no gancho do ciclo de vida do componente beforeMount

layoutBeforeMountEvent: function(newLayout){ console.log('beforeMount layout: ', newLayout) }

  • layoutMountedEvent

    Evento montado em layout

    Emitido no gancho de ciclo de vida montado no componente

layoutMountedEvent: function(newLayout){ console.log('Mounted layout: ', newLayout) }

  • layoutReadyEvent

    Evento pronto para layout

    Emitido quando todas as operações no gancho de montagem terminam

layoutReadyEvent: function(newLayout){ console.log('Ready layout: ', newLayout) }

  • layoutUpdatedEvent

    Evento atualizado de layout

    Cada vez que o layout termina de ser atualizado e as posições de todos os itens da grade são recalculadas

layoutUpdatedEvent: function(newLayout){ console.log('Updated layout: ', newLayout) }

  • moveEvent

    Mover evento

    Cada vez que um item está sendo movido e muda de posição

moveEvent: function(i, newX, newY){ console.log('MOVE i=' + i + ', X=' + newX + ', Y=' + newY); },

  • resizeEvent

    Redimensionar evento

    Cada vez que um item está sendo redimensionado e muda de tamanho

resizeEvent: function(i, newH, newW, newHPx, newWPx){ console.log('RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx); }, movedEvent: function(i, newX, newY){ console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY); },

  • resizedEvent

    Evento redimensionado

    Cada vez que um item termina de ser redimensionado e muda de tamanho

/** * * @param i the item id/index * @param newH new height in grid rows * @param newW new width in grid columns * @param newHPx new height in pixels * @param newWPx new width in pixels * */ resizedEvent: function(i, newH, newW, newHPx, newWPx){ console.log('RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx); },

  • containerResizedEvent

    Evento de contêiner redimensionado

    Cada vez que o item de grade / recipiente de layout muda de tamanho (janela do navegador ou outro)

/** * * @param i the item id/index * @param newH new height in grid rows * @param newW new width in grid columns * @param newHPx new height in pixels * @param newWPx new width in pixels * */ containerResizedEvent: function(i, newH, newW, newHPx, newWPx){ console.log('CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx); },

Contribuir

Se você tiver uma solicitação de recurso, adicione-a como um problema ou faça uma solicitação de pull.

Lista de afazeres

  • [x] Layout básico da grade
  • [x] Responsivo
  • [x] Itens de grade arrastáveis
  • [x] Itens de grade redimensionáveis
  • [x] Elementos estáticos
  • [x] Min / max w / h por item

Detalhes do download:

Autor: jbaysolutions

Demonstração ao vivo: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

GitHub: https://github.com/jbaysolutions/vue-grid-layout

#vuejs #javascript #vue # vue-js





Publicações Populares

Artigos Interessantes

Escolha Do Editor