v folder

pasta v

Um componente feito para vue@2, para seleção ou exibição de árvore/diretório/arquivos.

Observação

A versão Vue acima de 2.1.5 é necessária.

Instalar

 # npm
npm install --save v-folder

# or yarn
yarn add v-folder

Observe que font-awsome é obrigatório.

Demonstração

Você pode executar npm run dev para visualização local.

Para integração do projeto, veja configurações abaixo:

 import VFolder from 'v-folder' ;
Vue . use ( VFolder ) ;

new Vue ( {
  el : '#app' ,
  template : `
      <v-folder :data="data" :ajax="ajax" :conf="conf" @change="onChange"></v-folder>
  ` ,
  data ( ) {
    return {
      uid : 0 ,
      conf : {
        // tree node name
        node : 'sourceDir' ,
        // KEY NAME of dirs/branches/parents etc.. .
        branch : 'dirs' ,
        // KEY NAME of  files/leafs/children etc...
        leaf : 'files'
      } ,
      data : {
        // root
        sourceDir : 'C:/Users' ,
        // children
        files : [ ] ,
        dirs : [ ]
      } ,
      // ajax settings
      ajax : {
        method : 'GET' ,
        url : 'http://localhost:1234' ,
        params : { } ,
        data : { } ,
        headers : { } ,
        // params key of path
        pathAs : 'path' ,
        // process response data
        process : ( res ) => res . data
      }
    } ;
  } ,
  methods : {
    onChange ( result ) {
      console . log ( result ) ;
    }
  }
} ) ; 

Captura de tela