Vue Element UI-Komponente für benutzerdefinierte Beschreibungsliste

<Vorlage>
  <div Klasse="desc" :style="{margin}">
    <!-- Titel -->
    <h1 v-if="Titel" Klasse="desc-Titel" v-html="Titel"></h1>
    <el-row Klasse="desc-row">
      <Steckplatz/>
    </el-row>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "EDesc",
  // Wird den untergeordneten Komponenten über provide () { zur Verfügung gestellt.
    zurückkehren {
      Beschriftungsbreite: diese.Beschriftungsbreite,
      Spalte: diese.Spalte,
      Größe: diese.Größe
    }
  },
  Requisiten: {
    // Datenquelle, Daten abhören und Daten neu zeichnen: {
      Typ: Objekt,
      erforderlich: wahr,
      Standard () {
        zurückkehren {}
      }
    },
    // Titel: {
      Typ: Zeichenfolge,
      Standard: ''
    },
    // Marge: {
      Typ: Zeichenfolge,
      Standard: „0“
    },
    // Etikettenbreite labelWidth: {
      Typ: Zeichenfolge,
      Standard: „120px“
    },
    Spalte: {
      // Die Anzahl der angezeigten Elemente pro Zeilentyp: [Zahl, Zeichenfolge],
      Standard: 3
    },
    Größe: {
      // Größentyp: String,
      Standard: ''
    }
  },
  betrachten:
    Daten: {
      handler () {
        dies.$nextTick(() => {
          // Filtern Sie die Unterkomponente e-desc-item heraus
          const dataSource = this.$slots.default
          const Datenliste = []
          dataSource.fürJedes(item => {
            wenn (item.componentOptions && item.componentOptions.tag === 'e-desc-item') {
              dataList.push(Element.Komponenteninstanz)
            }
          })
          // Verbleibende Spanne
          let leftSpan = diese.Spalte
          const len ​​= dataList.length
          dataList.forEach((item, index) => {
            // Behandeln Sie die Beziehung zwischen Spalte und Spanne // Die Anzahl der verbleibenden Spalten ist kleiner als die festgelegte Anzahl von Spannen const hasLeft = leftSpan <= (item.span || 1)
            // Die nächste Spalte der aktuellen Spalte ist größer als der verbleibende Bereich
            const nextColumnSpan = (index < (länge - 1)) && (datenliste[index + 1].span >= leftSpan)
            // Die letzte Spalte der letzten Zeile const isLast = index === (len - 1)
            wenn (hasLeft || nextColumnSpan || isLast) {
            // Wenn die oben genannten Bedingungen erfüllt sind, muss span automatisch vervollständigt werden, um zu vermeiden, dass die letzte Spalte unvollständig ist item.selfSpan = leftSpan
              leftSpan = diese.Spalte
            } anders {
              leftSpan -= item.span || 1
            }
          })
        })
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>

<style scoped lang="scss">
  .desc{
    .desc-Titel {
      Rand unten: 10px;
      Farbe: #333;
      Schriftstärke: 700;
      Schriftgröße: 16px;
      Zeilenhöhe: 1,5715;
    }
    .desc-Zeile{
      Anzeige: Flex;
      Flex-Wrap: Umwickeln;
      Rahmenradius: 2px;
      Rand: 1px durchgezogen #EBEEF5;
      Rahmen unten: 0;
      Rand rechts: 0;
      Breite: 100 %;
    }
  }
</Stil>

<Vorlage>
  <el-col :span="computedSpan" class="desc-item">
    <div Klasse="desc-item-content" :Klasse="Größe">
      <label class="desc-item-label" :style="{width: labelWidth}" v-html="label"></label>
      <div Klasse="desc-item-value" v-if="$slots">
        <!-- Klartext -->
        <slot v-if="$slots.default && $slots.default[0].text"/>
        <!-- HTML -->
        <slot name="Inhalt" v-else-if="$slots.content"/>
        <span v-else>Keine Daten</span>
      </div>
    </div>
  </el-col>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'EDescItem',
  einfügen: ['Beschriftungsbreite', 'Spalte', 'Größe'],
  Requisiten: {
    Spanne: {
      Typ: [Zahl, Zeichenfolge],
      erforderlich: false,
      Standard: 0
    },
    Etikett: {
      Typ: Zeichenfolge,
      erforderlich: false,
      Standard: ''
    }
  },
  Daten () {
    zurückkehren {
      // Der eigene Span der Unterkomponente
      selbstSpan: 0
    }
  },
  berechnet: {
    berechneteSpanne() {
      // Der eigene Span der untergeordneten Komponente wird von der übergeordneten Komponente verwendet, um den Span zu berechnen und zu ändern
      wenn (this.selfSpan) {
        return 24 / diese.Spalte * diese.selfSpan
      } sonst wenn (diese.span) {
      // Spanne, die von Requisiten übergeben wird
        returniere 24 / diese.Spalte * diese.Spanne
      } anders {
      // Wenn die Spanne nicht überschritten wird, nimm die Spalte
        returniere 24 / diese.Spalte
      }
    }
  }
}
</Skript>

<style scoped lang="scss">
  .desc-Element {
    Rahmen rechts: 1px durchgezogen #EBEEF5;
    Rahmen unten: 1px durchgezogen #EBEEF5;
    .desc-Artikel-Inhalt {
      Anzeige: Flex;
      Inhalt ausrichten: Flex-Start;
      Elemente ausrichten: zentrieren;
      Farbe: rgba(0,0,0,.65);
      Schriftgröße: 14px;
      Zeilenhöhe: 1,5;
      Breite: 100 %;
      Hintergrundfarbe: #fafafa;
      Höhe: 100%;
      .desc-Elementbezeichnung{
        Rahmen rechts: 1px durchgezogen #EBEEF5;
        Anzeige: Inline-Block;
        Polsterung: 12px 16px;
        Flex-Wachstum: 0;
        Flex-Schrumpfen: 0;
        Farbe: rgba(0, 0, 0, 0,6);
        Schriftstärke: 400;
        Schriftgröße: 14px;
        Zeilenhöhe: 1,5;
        Höhe: 100%;
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
      }
      .desc-Artikel-Wert{
        Hintergrund: #fff;
        Polsterung: 12px 16px;
        Flex-Wachstum: 1;
        Überlauf: versteckt;
        Wörtertrennung: alles trennen;
        Höhe: 100%;
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
        Farbe: #444;
        Spanne{
          Farbe: #aaa;
        }
      }
      &.klein {
        .desc-Artikelbezeichnung,
        .desc-Artikel-Wert {
          Polsterung: 10px 14px;
        }
      }
    }
  }
</Stil>

<Vorlage>
  <e-desc: Daten = "Info" Rand = "0 12px" Beschriftungsbreite = "100px">
    <e-desc-item label="Name">{{info.name}}</e-desc-item>
    <e-desc-item label="Alter">{{ info.age }} Jahre alt</e-desc-item>
    <e-desc-item label="Geschlecht">{{ info.sex }}</e-desc-item>
    <e-desc-item label="Schule">{{ info.school }}</e-desc-item>
    <e-desc-item label="Professionell">{{ info.major }}</e-desc-item>
    <e-desc-item label="Hobby">{{ info.hobby }}</e-desc-item>
    <e-desc-item label="Mobiltelefonnummer">{{ info.phone }}</e-desc-item>
    <e-desc-item label="Kontakt">{{ info.wx }}</e-desc-item>
    <e-desc-item label="QQ">{{ info.qq }}</e-desc-item>
    <e-desc-item label="Adresse">{{ info.address }}</e-desc-item>
    <e-desc-item label="Selbstbeschreibung" :span='2'>{{ info.intro }}</e-desc-item>
    <e-desc-item label="Vorgang" :span='3'>
      <Vorlagenslot="Inhalt">
        <el-button size="small" type="primary">Ändern</el-button>
        <el-button size="small" type="danger">Löschen</el-button>
      </Vorlage>
    </e-desc-item>
  </e-desc>
</Vorlage>

<Skript>
importiere EDesc aus './e-desc'
EDescItem aus „./e-desc-item“ importieren
Standard exportieren {
  Komponenten:
    EDesc, EDescItem
  },
  Daten () {
    zurückkehren {
      Info:
        Name: 'Jerry',
        Alter: 26,
        Geschlecht: 'männlich',
        Schule: 'Sichuan University',
        Hauptfach: 'Professioneller Programmierer',
        Adresse: „Chengdu, Provinz Sichuan“,
        Hobby: 'Steine ​​bewegen, Front-End, Geld verdienen',
        Telefon: 18888888888,
        wx: 'Nice2cu_Hu',
        QQ: 332983810,
        Intro: „Ich bin Maler und ich kann gut malen.“ Ich möchte das neue Haus streichen, um es schöner zu machen. Nachdem er das Dach gestrichen hatte, strich er die Wand, wobei der Pinsel fleißig umherflog. Oh meine kleine Nase, sie hat sich verändert. Ich bin Maler und verfüge über ausgeprägte malerische Fähigkeiten. Ich möchte das neue Haus streichen, um es schöner zu machen. Nachdem er das Dach gestrichen hatte, strich er die Wand, wobei der Pinsel fleißig umherflog. Oh meine kleine Nase, sie hat sich verändert. '
      }
    }
  }
}
</Skript>