So heben Sie die Durchstreichung im Vue Gantt-Diagramm auf

Vue ist ein beliebtes JavaScript-Framework mit vielen Plugins und Bibliotheken, die bei der Entwicklung von Webanwendungen verwendet werden können, einschließlich eines Gantt-Diagramm-Plugins. Das Gantt-Diagramm ist ein sehr verbreitetes Projektmanagement-Tool, das eine visuelle Zeitleiste bietet, in der der Fortschritt und der Zeitplan eines Projekts angezeigt werden können. Bei Verwendung des Gantt-Diagramm-Plug-Ins wird jedoch manchmal die Durchstreichung angezeigt. In diesem Artikel erfahren Sie, wie Sie das Durchgestrichene des Gantt-Diagramm-Plug-Ins deaktivieren.

1. Verstehen Sie die Bedeutung von Durchgestrichen

In einem Gantt-Diagramm bedeutet Durchgestrichen normalerweise, dass eine Aufgabe oder ein Zeitraum beendet ist oder einen bestimmten Wert erreicht hat Meilenstein. Durchgestrichene Markierungen zeigen deutlich den Status einer Aufgabe an, sodass jeder im Team weiß, wie das Projekt voranschreitet. Wenn Sie jedoch nicht möchten, dass die Durchstreichung angezeigt wird, können Sie sie wie folgt abbrechen.

2. Verwendung des Gantt-Diagramm-Plug-Ins in Vue

Die Verwendung des Gantt-Diagramm-Plug-Ins in Vue ist sehr einfach. Sie müssen lediglich npm verwenden, um das Plug-In zu installieren und die entsprechenden Komponenten einzuführen und zu konfigurieren. Im Folgenden finden Sie die grundlegende Vue-Projektstruktur und einen Beispielcode zur Installation und Einführung des Gantt-Diagramm-Plugins:

<template>
  <div>
    <gantt-chart :tasks="tasks" :options="options" />
  </div>
</template>

<script>
import GanttChart from 'vue-gantt-chart';

export default {
  name: 'App',
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          name: '任务1',
          start: '2022-02-01',
          end: '2022-02-03'
        },
        {
          name: '任务2',
          start: '2022-02-03',
          end: '2022-02-05'
        }
      ],
      options: {
        mode: 'day',
        showLastLine: true
      }
    };
  }
};
</script>

Im obigen Code haben wir das vue-gantt-chart-Plugin installiert und als Vue registriert Komponente. Wir definieren auch das Aufgabenobjekt, das zwei Aufgaben und deren Start- und Enddatum enthält. Mit dem Optionsobjekt können wir den Modus und andere Optionen des Gantt-Diagramms definieren.

3. Durchstreichen aufheben

Schauen wir uns nun an, wie das Durchstreichen aufgehoben wird. Das Abziehen ist sehr einfach. Wir müssen lediglich den CSS-Stil, der das Durchstreichen darstellt, auf „none“ setzen.

Das Folgende ist ein einfaches CSS-Stylesheet, das das Durchstreichen des Gantt-Diagramms aufhebt:

.gantt .bar-line {
  display: none;
}

Sie können das obige CSS-Stylesheet in Ihre Vue-Komponente einbinden, um das Durchstreichen zu entfernen das Gantt-Diagramm. Wenn Sie die Durchstreichung nur für eine bestimmte Aufgabe entfernen möchten, können Sie eine separate CSS-Klasse für diese Aufgabe erstellen und diese auf das Balkendiagramm für diese bestimmte Aufgabe anwenden.

Wenn Sie beispielsweise das Durchstreichen für Aufgabe 1 abbrechen möchten, können Sie den folgenden CSS-Code in der Komponente hinzufügen:

.gantt .task.task1 .bar-line {
  display: none;
}

Im obigen Code haben wir erstellt eine CSS-Klasse für Aufgabe 1 und verwendete „task1“ als Klassennamen. Wir haben auch den durchgestrichenen Stil mit „display:none“ auf „none“ gesetzt.

4. Zusammenfassung

Die Verwendung des Gantt-Diagramm-Plug-Ins in Vue ist sehr einfach, und das Entfernen der Durchgestrichenen ist ebenfalls ein Kinderspiel. Setzen Sie einfach den CSS-Stil, der das Durchstreichen darstellt, auf „Keine“, um das Durchstreichen im Gantt-Diagramm aufzuheben. Darüber hinaus können Sie das Durchstreichen einer Aufgabe auch aufheben, indem Sie individuell eine CSS-Klasse für diese bestimmte Aufgabe erstellen, was Ihnen mehr Flexibilität und Kontrolle bietet.

Das obige ist der detaillierte Inhalt vonSo heben Sie die Durchstreichung im Vue Gantt-Diagramm auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!