Beispielcode zur Verwendung der Elementkalenderkomponente in Vue

Beispielcode zur Verwendung der Elementkalenderkomponente in Vue

Schauen Sie sich zunächst das Wirkungsdiagramm an:

Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen

Der komplette Code ist beigefügt

<Vorlage>
  <div Klasse="newSeeds" id="famerCalendar">
    <div Klasse="Titel-unten">
      <el-Datumsauswahl
        :löschbar="falsch"
        Präfix-Symbol = "Zeitfilter"
        v-Modell="Wert2"
        Typ="Monat"
        Platzhalter="Monat auswählen"
        Werteformat="jjjj-MM"
        @change="Änderungsdatum"
      >
      </el-Datumsauswahl>
    </div>
    <div Klasse="calendarBody">
      <el-calendar v-model="Wert">
        <template slot="dateCell" slot-scope="{ Datum, Daten }">
          <div
            @click="Tagwählen(Daten)"
            Klasse="Zelleninfo"
            :Klasse="data.isSelected == true ? 'shadowBox' : ''"
          >
            <ul Klasse="ZellenInfoUl">
              <li v-for="(Element, Index) in ActiveList" :Schlüssel="Index">
                <p v-if="Daten.Tag == Artikel.Zeit" Klasse="ZellInfoUlP">
                  {{ Artikelname }}
                </p>
              </li>
            </ul>
            <div
              v-for="(val, keys, i) in umgekehrter Nachricht"
              :Schlüssel="i"
              :Klasse="data.day == keys ? 'tipMsg' : ''"
            >
              <span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
            </div>
            <div Klasse="ZellenInfoBox">
              <p>{{ Daten.Tag.split("-")[2] }}</p>
            </div>
          </div>
        </Vorlage>
      </el-Kalender>
    </div>
    <!-- Schublade -->
    <el-Schublade
      :title="ZeitWählen"
      :visible.sync="Schublade"
      :direction="Richtung"
    >
      <div Klasse="ModusJeder" v-if="ListeNormal[0]">
        <div Klasse="modeEachs" v-for="(item, index) in listNormal" :key="index">
          <i class="setI el-icon-delete" @click="delTips(item)"></i>
          <i
            Klasse = "setI setIs el-icon-edit-outline"
            @click="Tipps hinzufügen(1, Artikel)"
          ></i>
          <p>
            <span>Startzeit:</span> <span>{{ item.time }}</span>
          </p>
          <p>
            <span>Name der landwirtschaftlichen Aktivität:</span> <span>{{ item.name }}</span>
          </p>
          <p>
            <span>Verantwortliche Person:</span> <span>{{ item.userName }}</span>
          </p>
          <p>
            <span>Anzahl der Teilnehmer:</span> <span>{{ item.people }}</span>
          </p>
          <p>
            <span>Zielspezifikation:</span> <span>{{ item.content }}</span>
          </p>
        </div>
      </div>
      <div Klasse="modeEach modeEached" v-else>
        <div Klasse="leererZustand">
          <img src="../../../assets/leftScreen/math17.png" alt="" />
        </div>
        <p>Für das aktuelle Datum sind keine landwirtschaftlichen Aktivitäten geplant.</p>
        <p>Klicken Sie auf die Schaltfläche „Landwirtschaftliche Aktivität hinzufügen“ in der unteren rechten Ecke, um sie hinzuzufügen! </p>
      </div>
      <div Klasse="FußBox">
        <el-button type="primary" @click="addTips(0)">Landwirtschaftliche Aktivitäten hinzufügen</el-button>
      </div>
    </el-Schublade>
    <!-- Neue Änderungen -->
    <el-dialog
      Titel=""
      :visible.sync="Formular aktualisieren"
      Breite="31vw"
      Klasse="addAlameBox"
    >
      <div slot="Titel" Klasse="Header-Titel" Stil="Position: relativ">
        <span class="Titelname"></span>
        <span class="title-age">{{ boxPrompt }}</span>
        <span
          Stil="
            Position: absolut;
            oben: 50 %;
            transformieren: verschiebeY(-50%);
            rechts: 0px;
            Schriftgröße: 2,22vh;
          "
        >
        </span>
      </div>
      <div Klasse="addAlaForm">
        <el-form
          ref="upTableData"
          :Regeln="Regeln"
          :Modell="upTableData"
          Beschriftungsbreite = "10vw"
        >
          <!-- <el-form-item label="Startzeit" prop="Zeit">
            <div Klasse="Block">
              <el-Datumsauswahl
                v-Modell="upTableData.time"
                Typ="Datum/Uhrzeit"
                Werteformat="jjjj-MM-tt HH:mm:ss"
                Platzhalter="Datum und Uhrzeit auswählen"
              >
              </el-Datumsauswahl>
            </div>
          </el-form-item> -->
          <el-form-item label="Name der landwirtschaftlichen Tätigkeit" prop="Name">
            <el-input v-model="upTableData.name"></el-input>
          </el-form-item>
          <el-form-item label="Verantwortlicher" prop="Benutzername">
            <el-input v-model="upTableData.Benutzername"></el-input>
          </el-form-item>
          <el-form-item label="Anzahl der Teilnehmer" prop="Personen">
            <el-input v-model="upTableData.Personen"></el-input>
          </el-form-item>
          <el-form-item label="Zielspezifikation" prop="content">
            <el-input v-model="upTableData.content"></el-input>
          </el-form-item>
          <el-form-item size="groß">
            <el-Schaltfläche
              Klasse="saveBtn"
              Typ="primär"
              @click="Form speichern('upTableData')"
              >Speichern</el-Schaltfläche
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</Vorlage>
<Skript>
importiere Datumsformat aus "../../../components/dealTime.js";
Standard exportieren {
  Daten() {
    zurückkehren {
      Zeitauswahl: "7-26",
      Sechsen: [],
      Zahl: 0,
      aktiver Tag: 0,
      timeRex: "",
      listParams: {
        Seite: 1,
        Größe: "",
        Wo: "",
        Zeit: "",
      },
      IDs: 0,
      ListeNormal: [],
      aktiveListe: [
        {
          data1: "17.08.2021 15:30",
          data2: "1# Parzellenbewässerung",
          Daten3: „Sonne Guodong“,
          Daten4: "16",
          data5: „Bodenfeuchtigkeit erreicht 40%“,
        },
        {
          data1: "17.08.2021 15:30",
          data2: "1# Parzellenbewässerung",
          Daten3: „Sonne Guodong“,
          Daten4: "16",
          data5: „Bodenfeuchtigkeit erreicht 40%“,
        },
      ],
      updateForm: false,
      boxPrompt: "Neu",
      upTableData: {
        ID: 0,
        Name: "", //Operationsname Zeit: "", //Geplante Zeit Benutzername: "", //Verantwortliche Person Personen: "", //Anzahl der Personen Inhalt: "", //Inhalt},
      Regeln:
        Daten1: [
          { erforderlich: true, Nachricht: "Zeit", Auslöser: ["Unschärfe", "Änderung"] },
        ],
        Daten2: [
          {
            erforderlich: wahr,
            Meldung: „Produktname darf nicht leer sein“,
            Auslöser: ["verwischen", "ändern"],
          },
        ],
        Daten3: {
          erforderlich: wahr,
          Meldung: „Produkttyp darf nicht leer sein“,
          Auslöser: ["verwischen", "ändern"],
        },
        Daten4: {
          erforderlich: wahr,
          Meldung: "Spezifikation darf nicht leer sein",
          Auslöser: ["verwischen", "ändern"],
        },
        Daten5: {
          erforderlich: wahr,
          Meldung: "Die Liefermenge darf nicht leer sein",
          Auslöser: ["verwischen", "ändern"],
        },
      },
      // Schublade: false,
      Richtung: "rtl",
      // Datumswert2: "",
      Wert: neues Datum(),
      wird geladen: falsch,
      LogistikFormular: {
        Name: "",
        Region: -1,
      },
    };
  },

  montiert() {
    dies.requrstLists();
    dies.getNowDate();
    // dies.getActivityCalendar;
  },
  betrachten:
    aktiveListe(neuerWert) {
      this.activeList = neuerWert;
    },
  },
  berechnet: {
    reverseMessage() {
      var arrs = [];
      var countArrs = [];
      dies.activeList.forEach((val) => {
        arrs.push(Wert.Zeit);
      });
      return arrs.reduce(Funktion (vorherige, nächste) {
        vorherige[nächste] = vorherige[nächste] + 1 || 1;
        countArrs.push({ vorherige });
        zurück vorh.;
      }, {});
      // };
    },
  },
  Methoden: {
    // Aktuelle Uhrzeit abrufen getNowDate(){
      var date = neues Datum();
      this.value2 = dateFormat('JJJJ-mm',Datum)
    },
    // Holen Sie sich die Listenschnittstelle async requrstLists() {
      Konstante {
        Daten: {Daten},
      } = warte darauf.$post("product/getProductPlayList", {
        Seite: 1,
        Größe: "",
        Wo: "",
        Zeit: "",
      });
      datas.forEach((val) => {
        wenn (val.time.indexOf(":")) {
          console.log("Speicherplatz gefunden");
          val.time = val.time.split(" ")[0];
        }
      });
      this.activeList = Daten;
      // dies.sortArr()
    },
    asynchrone Anfrageliste () {
      Konstante {
        Daten: {Daten},
      } = warte auf dies.$post("product/getProductPlayList", dies.listParams);
      this.listNormal = Daten;
    },
    // Hinzufügen addTips(val, item) {
      dies.updateForm = wahr;
      wenn (Wert === 0) {
        this.boxPrompt = "Neu";
        dies.upTableData = {
          ID: 0,
          Name: "", //Name des Vorgangs Zeit: "", //Geplante Zeit Benutzername: "", //Verantwortliche Person Personen: "", //Anzahl der Personen Inhalt: "", //Inhalt};
      } sonst wenn (Wert === 1) {
        this.boxPrompt = "Bearbeiten";
        diese.ids = Artikel-ID;
        dies.$nextTick(() => {
          Dies.upTableData = JSON.parse(JSON.stringify(item));
        });
      }
    },
    //Speichern saveForm() {
      let url = "/Produkt/EditProductPlay";
      wenn (this.boxPrompt == "Neu") {
        diese.upTableData.id = 0;
      } sonst wenn (this.boxPrompt == "Bearbeiten") {
        diese.upTableData.id = diese.ids;
      }
      this.upTableData.time = this.timeChoose + "00:00:00";
      dies.$refs["upTableData"].validate((gültig) => {
        if (gültig) {
          dies.$get(url, dies.upTableData).then((res) => {
            this.updateForm = falsch;
            wenn (res.data.state == "Erfolg") {
              diese.requrstList();
              dies.requrstLists();
              this.$message.success("Vorgang erfolgreich");
            } anders {
              this.$message.error("Vorgang fehlgeschlagen! Bitte versuchen Sie es später erneut!");
            }
          });
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    },
    wähleTag(Daten) {
      dies.$nextTick(() => {
        wenn (Datentyp === "aktueller Monat") {
          diese.Schublade = wahr;
          diese.listParams.time = Daten.Tag;
          diese.Zeitauswahl = Daten.Tag;
          diese.requrstList();
        } sonst wenn (data.type === "vorheriger Monat") {
          dies.prevBtn.click();
        } sonst wenn (data.type === "nächster-Monat") {
          dies.nextBtn.click();
        }
      });
    },

    // SchubladengriffSchließen(erledigt) {
      this.$confirm("Schließen bestätigen?")
        .then((res) => {
          Erledigt();
          dies.requrstLists();
        })
        .catch((err) => {});
    },
    // Löschen delTips(val) {
      konsole.log(Wert);
      this.$confirm("Dieser Vorgang löscht die Datei unwiderruflich. Möchten Sie fortfahren?", "Prompt", {
        confirmButtonText: "Bestätigen",
        cancelButtonText: "Abbrechen",
        Typ: "Warnung",
      })
        .then(() => {
          dies.$post("/product/deteleProductPlay", { id: val.id }).dann(
            (res) => {
              wenn (res.data.state == "Erfolg") {
                this.$message.success("Erfolgreich gelöscht");
                diese.requrstList();
                dies.requrstLists();
              } anders {
                dies.$message(res.data.msg);
              }
            }
          );
        })
        .fangen(() => {
          diese.$nachricht({
            Typ: "info",
            Nachricht: "Gelöscht",
          });
        });
    },

    //Zeitauswahl changeDate(val) {
      dieser.Wert = Wert;
    },
    //Aktualisieren refresh() {
      dies.laden = wahr;
      // diese.requrstList();
    },
    //Suchesearch() {
      let name = diese.logisticsForm.name;
      let level = diese.logisticsForm.region;
      wenn (Ebene == -1) Ebene = "";
      dies.laden = wahr;
      // diese.requrstList(Name, Ebene);
    },
    //Reset removeForm() {
      this.logisticsForm.name = "";
      diese.logisticsForm.region = -1;
      // diese.requrstList();
    },
  },
};
</Skript>

<style scoped lang="weniger">
@import "../../../style/backTable.less";
</Stil>
  <style scoped lang="weniger">
#famerCalendar /deep/ .el-calendar-table {
  Breite: 100 %;
  Höhe: 100%;
  &:nicht(.is-range) {
    // Daten, die nicht in diesem Monat liegen, nicht anklickbar machen und nicht in andere Monate springen lassen td.next {
      Zeigerereignisse: keine;
    }
    td.vorher {
      Zeigerereignisse: keine;
    }
  }
}

.calendarBody {
  Breite: 100 %;
  Höhe: 81vh;
}
#famerCalendar .newSeeds {
  Höhe: 90vh;
}
#famerCalendar /deep/ .el-calendar__header {
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 12px 20px;
  Rand: keiner;
  Textausrichtung: zentriert;
  Hintergrund: #00284d;
  Anzeige: Block;
}
#famerCalendar /deep/ .el-button-group {
  Anzeige: keine;
}
#famerCalendar /deep/ .el-calendar__title {
  Farbe: #fff;
  selbst ausrichten: zentrieren;
  Zeilenhöhe: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
  Hintergrund: #5c768d;
  Farbe: #fff;
  Polsterung: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
  Hintergrund: #335371;
  Farbe: #fff;
  Polsterung: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
  Polsterung: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
  Polsterung links: 3vw;
  Breite: 75 %;
  /* Höhe: 4vh;
    Zeilenhöhe: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  Breite: 10vw;
}
#famerCalendar .timeFilter {
  Position: relativ;
}
#famerCalendar /deep/ .el-calendar-table td {
  Textausrichtung: rechts;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
  Box-Größe: Rahmenbox;
  // Polsterung: 1vh;
  Polsterung: 0;
  Höhe: 11,5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
  Box-Größe: Rahmenbox;
  Polsterung: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
  Mindestbreite: 2vw;
  Leerzeichen: Nowrap;
  Inhalt: "Datum";
  Rahmen rechts: 1px durchgezogen #c0c4cc;
  Polsterung: 0 0,2vw;
  Box-Größe: Rahmenbox;
  /* Zeilenhöhe: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
  Rand: keiner;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
  Rand: keiner;
}
.cellInfoUl {
  Breite: 80%;
  Höhe: 100%;
  Überlauf: versteckt;
  Überlauf-y: scrollen;
}
.cellInfoUl::-webkit-scrollbar {
  Anzeige: keine;
}
.cellInfo {
  Position: relativ;
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 1vh;
  Box-Größe: Rahmenbox;
}
.tipMsg {
  Position: absolut;
  Anzeige: Flex;
  rechts: 0vh;
  unten: 0vh;
  Breite: 2vw;
  Höhe: 2vw;
  Farbe: #fff;
}
.tipMsged {
  Position: absolut;
  oben: 50 %;
  links: 50%;
  Z-Index: 100;
  transformieren: übersetzen (-10 %, -20 %);
}
.tipMsg::vor {
  Inhalt: "";
  Position: absolut;
  oben: 0;
  links: 0;
  Höhe: 0px;
  Breite: 0px;
  Rand oben: durchgehend 2vw transparent;
  Rand links: durchgezogen 2vw #3999e6;
  transformieren: drehenZ(-90 Grad);
}
.cellInfoUl li {
  Breite: 100 %;
  Zeilenhöhe: 2,5vh;
  Farbe: #fff;
  Hintergrund: #61adeb;
  Rand unten: 1vh;
  Polsterung: 0 0,5vw;
  Box-Größe: Rahmenbox;
  Rahmenradius: 16px;
  Textausrichtung: zentriert;
}
.cellInfoBox {
  Textausrichtung: zentriert;
  /* Farbe: #; */
}
.modeEach {
  Breite: 100 %;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
  Höhe: 78vh;
  Überlauf: versteckt;
  Überlauf-y: scrollen;
}
.modeEach::-webkit-scrollbar {
  Anzeige: keine;
}
.FußBox {
  Breite: 100 %;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
}
.modeEachs {
  Breite: 100 %;
  Mindesthöhe: 18vh;
  Hintergrund: #3999e6;
  Rahmenradius: 6px;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
  Position: relativ;
  Rand unten: 1vh;
}
.setI {
  Position: absolut;
  oben: 1vh;
  rechts: 0,5vw;
  Hintergrund: #fff;
  Breite: 2,5vh;
  Höhe: 2,5vh;
  Randradius: 50 %;
  Textausrichtung: zentriert;
  Zeilenhöhe: 2,5vh;
  Farbe: rot;
}
.setIs {
  oben: 1vh;
  rechts: 2vw;
  Farbe: #3999e6;
}
.modeEachs span {
  Schriftgröße: 1,3vh;
  Schriftfamilie: Source Han Sans CN;
  Schriftstärke: 400;
  Farbe: #ffffff;
  Zeilenhöhe: 2,78vh;
}
.modeEachs span:n-ter-Typ(1) {
  Mindestbreite: 3vw;
  Anzeige: Inline-Block;
}
.FußBox {
  Textausrichtung: rechts;
}
.emptyState {
  Breite: 100 %;
  Höhe: 60%;
  Textausrichtung: zentriert;
}
.emptyState img {
  Breite: 80%;
  Mindesthöhe: 100 %;
}
.modeEached {
  Textausrichtung: zentriert;
}
.modeEached p {
  Schriftgröße: 1,67vh;
  Schriftfamilie: Source Han Sans CN;
  Schriftstärke: 400;
  Farbe: #666666;
  Zeilenhöhe: 2,78vh;
}
.shadowBox {
  Kastenschatten: 0px 0px 15px 3px rgba (0, 0, 0, 0,15);
  Polsterung: 1vh;
  Box-Größe: Rahmenbox;
}
</Stil>

Dies ist das Ende dieses Artikels über den Beispielcode der Kalenderkomponente mit Element in Vue. Weitere relevante Inhalte zur Kalenderkomponente mit Vue-Element finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue implementiert Kalenderkomponente
  • Vue implementiert eine vertikal unendlich verschiebbare Kalenderkomponente
  • Kapselungsmethode der Vue-Kalenderkomponente
  • Schreiben Sie eine Vue-Kalenderkomponente von Grund auf neu
  • Benutzerdefinierte optionale Zeitkalenderkomponente von Vue
  • Verbesserte Kalenderkomponente basierend auf Vue2-Calendar (einschließlich chinesischer Anweisungen)
  • Vue implementiert eine coole Kalenderkomponente
  • VUE implementiert Kalenderkomponentenfunktion
  • Vue-Version der handschriftlichen Kalenderkomponente

<<:  Analyse von 2 Implementierungsmethoden zum Konfigurieren der JNID-Datenquelle in Tomcatc3p0

>>:  Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

Artikel empfehlen

Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten

Schreiben einer Docker-Datei Am Beispiel des von ...

Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

Wir wissen, dass eine Funktion im Allgemeinen auf...

Anwendung schöner Stylesheets bei der Erstellung von XHTML+CSS-Webseiten

Dies ist ein Artikel, der vor langer Zeit geschrie...

Detaillierte Erklärung zum Ändern des Standardports von nginx

Finden Sie zunächst heraus, wo sich die Konfigura...

Implementierung der K8S-Bereitstellung eines Docker-Containers

Umgebung: (Docker, K8s-Cluster), fahren Sie mit d...

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

Das Debuggen der Website-Kompatibilität ist wirkl...

Vue implementiert einfache Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung, wann Javascript-Skripte ausgeführt werden

JavaScript-Skripte können überall in HTML eingebe...

Tutorial zur Verwendung von Hyperlink-Tags in XHTML

Hyperlink, auch „Link“ genannt. Man kann sagen, d...

Verwendung von MySQL-Triggern

Inhaltsverzeichnis 1. Trigger-Einführung 1. Was i...

Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang

Vorwort Bisher waren statische IPs, die über Pipe...