javascript - Comment écrire une arborescence de répertoires de fichiers en utilisant Polymer?
世界只因有你
世界只因有你 2017-07-05 10:40:54
0
1
703

Je viens de regarder la structure de base du polymère il y a deux jours, et maintenant je dois l'utiliser pour écrire une arborescence de répertoires de fichiers, j'ai donc récupéré une balise d'arborescence écrite par quelqu'un d'autre sur git, mais je ne sais pas comment l'utiliser J'espère qu'il y a quelqu'un qui a une compréhension approfondie du polymère. S'il vous plaît, donnez-moi la réponse, merci !
Voici le contenu de cette balise :

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="iris-treeview">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        color: var(--mydoc-brown-1000);
      }
      
      span {
        cursor: pointer;
      }
      
      iris-treeview:before {
        content: '';
        display: inline-block;
        border-top: 2px solid;
        padding-left: 15px;
        margin-left: -25px;
        height: 5px;
      }
      
      .branch {
        padding-left: 25px;
        border-left: 2px solid;
        position: relative;
      }
      
      .branch:last-of-type:after {
        content: '';
        border-left: 2px solid;
        position: absolute;
        top: 10px;
        bottom: 0;
        color: white;
        margin-left: -27px;
      }
      
      .selected {
        color: var(--mydoc-brown-400);
      }
    </style>
    <content></content>

    <template is="dom-if" if="[[isBranch]]">
      <template id="list" is="dom-repeat" items="[[tier]]">
        <p class="branch" changed$="[[isChanged(item,switch)]]">
          <iris-treeview display-depth="[[down]]" data="[[data]]" selected="{{selected}}" display-leaf="[[displayLeaf]]" path$="[[path]].[[item]]">
            <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">[[item]]</span>
          </iris-treeview>
        </p>
      </template>
    </template>

    <template is="dom-if" if="[[isLeaf]]">
      <span class="leaf" on-click="leafClick" hidden$="[[!displayLeaf]]">[[value]]</span>
    </template>

  </template>
  <script>
    'use strict'
    Polymer({
      is: 'iris-treeview',
      properties: {
        data: {
          type: Object,
          observer: '_dataChanged'
        },
        displayDepth: {
          type: Number,
          value: 10
        },
        displayLeaf: {
          type: Boolean,
          value: false
        },
        path: {
          type: String,
          value: ''
        },
        selected: {
          type: Object,
          notify: true
        }
      },
      observers: ['_deepChanged(data.*)'],
      _deepChanged(data) {
        this.set('switch', !this.switch);
      },
      isChanged(item, s) {
        return false;
      },
      treeviewClass(sel, item) {
        return (sel == this.path + '.' + item) ? 'selected' : "";
      },
      branchClick(e) {
        console.log(this.path);
        let item = e.model.item;
        let branch = this.data[item]
        let path = this.path + '.' + item;

        this.fire('select', {
          type: 'branch',
          value: branch,
          path: path
        });
        this.fire('select-branch', {
          value: branch,
          path: path
        });

        this.set('selected', path);
      },
      leafClick(e) {
        let path = this.path + '.' + item;
        this.fire('select', {
          type: 'leaf',
          value: this.value,
          path: path
        });

        this.fire('select-leaf', {
          value: this.value,
          path: path
        });

        this.set('selected', path);
      },
      _dataChanged(data) {
        if (this.displayDepth <= 0) return;
        this.down = this.displayDepth !== false ? this.displayDepth - 1 : false;
        let q = this.path.split('.');

        let current = _.slice(q, 1).length ? _.get(this.data, _.slice(q, 1)) : this.data;

        let branch = true;

        if (_.isObject(data)) {
          this.set('tier', _.keys(current));
        } else {
          branch = !branch;
          this.set('value', data);
        }

        this.set('isBranch', branch);
        this.set('isLeaf', !branch);
      },
      getTier(item) {
        return this.data[item]
      }
    });
  </script>
</dom-module>
世界只因有你
世界只因有你

répondre à tous(1)
给我你的怀抱

La méthode d'appel est la même que la méthode d'auto-référence dans le composant, en passant les propriétés et en écrivant les enfants

<iris-treeview
    display-depth="[[down]]"
    data="[[data]]"
    selected="{{selected}}"
    display-leaf="[[displayLeaf]]"
    path$="[[path]].[[item]]"
>
  <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">
    [[item]]
  </span>
</iris-treeview>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal