Vue realisiert Preiskalendereffekt

<Vorlage>
  <div Stil="Breite:600px">
    <ele-kalender
      :render-content="Renderinhalt"
      :data="Datumsdefinition"
      :prop="Eigenschaft"
      :disabledDate="Deaktivierungsdatum"
      :effektivesZeitlimit="effektivesZeitlimit"
      :Standardwert="Standardwert"
    >
    </ele-Kalender>
  </div>
</Vorlage>

<Skript>
importiere eleCalendar aus „ele-calendar“
importiere 'ele-calendar/dist/vue-calendar.css'
Standard exportieren {
  Requisiten: {
    Datumsdefinition: {
      Typ: Array,
      Standard: () => {
        zurückkehren []
      }
    },
    Standardpreis: {
      Typ: Zeichenfolge,
      Standard: () => {
        zurückkehren ''
      }
    },
    effektivesZeitlimit:
      Typ: Zeichenfolge,
      Standard: () => {
        zurückkehren ''
      }
    },
    Standardwert: {
      Typ: Datum,
      Standard: () => {
        returniere neues Datum()
      }
    }
  },
  Daten () {
    const self = dies
    zurückkehren {
      prop: 'date', // Entsprechender Datumsfeldname disabledDate: date => {
        zurückkehren (
          Datum.Wert von() < neues Datum().Wert von() - 1 * 24 * 60 * 60 * 1000 ||
          Datum.Wert von() > neues Datum (selbst.effektivesZeitlimit).Wert von()
        )
      }
    }
  },
  Komponenten:
    eleKalender
  },
  Methoden: {
    //JSX-Syntax renderContent (h, parmas) {
      const self = dies
      const Schleife = Daten => {
        zurückkehren (
          <div Klasse={data.defvalue.value ? 'aktiv' : ''}>
            <div>{Daten.defvalue.text}</div>
            <div>
              ￥
            <i-Eingabe
              Wert={
                Daten.Defwert.Wert.Inhalt
                  ? Daten.Defwert.Wert.Inhalt
                  : selbst.Standardpreis
              }
              ein-ein-Unschärfe={Ereignis =>
                selbst.handleChange(
                  Ereignis,
                  Daten.defwert.Wert
                    ? Daten.defwert.Wert.Datum
                    : selbst.handleDate(data.defdate)
                )
              }
              deaktiviert={
                Daten.defwert.Wert
                  ? neues Datum(data.defvalue.value.date).valueOf() <
                        neues Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
                      neues Datum(data.defvalue.value.date).valueOf() >
                        neues Datum (selbst.effektivesZeitlimit).valueOf ()
                  : data.defdate.valueOf() <
                        neues Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
                      Daten.defdate.valueOf() >
                        neues Datum (selbst.effektivesZeitlimit).valueOf ()
              }
              Schlüssel={
                Daten.defwert.Wert
                  ? Daten.defwert.Wert.Datum
                  : selbst.handleDate(data.defdate)
              }
            />
            </div>
          </div>
        )
      }
      zurück <div style='min-height:60px;'>{loop(parmas)}</div>
    },
    handleChange (Ereignis, Datum) {
      console.log(Ereignis, Datum, 'dddddd')
      const self = dies
      const index = self.datedef.findIndex(item => {
        Rückgabewert: item.date === Datum
      })
      wenn (istNaN(Ereignis.Ziel.Wert)) {
        self.$Message.error('Bitte geben Sie den korrekten Preis ein.')
        event.target.value = selbst.Standardpreis
        zurückkehren
      }
      wenn (Ereignis.Ziel.Wert && Index === -1) {
        wenn (Ereignis.Ziel.Wert === selbst.Standardpreis) {
          zurückkehren
        }
        selbst.datedef.push({
          Datum,
          Inhalt: Ereignis.Ziel.Wert,
          cid: null
        })
        Konsole.log('self.datedef', self.datedef)
        dies.$emit('aaa', self.datedef)
      } sonst wenn (Ereignis.Ziel.Wert && Index !== -1) {
        wenn (Ereignis.Ziel.Wert === selbst.Standardpreis) {
          selbst.datedef.splice(index, 1)
          zurückkehren
        }
        const selectItem = self.datedef[index]
        selectItem.content = Ereignis.Ziel.Wert
        self.datedef.splice(Index, 1, Element auswählen)
      } sonst wenn (!event.target.value && index !== -1) {
        selbst.datedef.splice(index, 1)
      } anders {
        event.target.value = selbst.Standardpreis
      }
    },
    handleDate (Datum) {
      const jahr = date.getFullYear()
      lass Monat = date.getMonth() + 1
      Monat = Monat >= 10 ? Monat : '0' + Monat
      lass idate = date.getDate()
      idate = idate >= 10 ? idate : '0' + idate
      gibt `${year}-${month}-${idate}` zurück
    }
  }
}
</Skript>

<style lang="scss">
.el-picker-panel-calendar.el-date-picker-calendar.el-popper {
  Kastenschatten: keiner;
}
.el-date-table-calendar td > div > div {
  Rand: 1px durchgezogen #aaa;
  Farbe: #fff;
  Rand: 5px;
  & > div:erstes-Kind {
    Hintergrundfarbe: #aaa;
  }
  & > div:n-tes-Kind(2) {
    Polsterung: 5px;
    Farbe: #000;
    .ivu-input-wrapper {
      Breite: 80%;
    }
  }
  &.aktiv {
    Rand: 1px durchgezogen #2ab561;
    & > div:erstes-Kind {
      Hintergrundfarbe: #2ab561;
    }
    & > div:n-tes-Kind(2) {
      Polsterung: 5px;
      Farbe: #000;
      .ivu-input-wrapper {
        Breite: 80%;
      }
    }
  }
}
// Wenn dieser Abschnitt freigegeben wird, werden alle Felder vor dem aktuellen Tag ausgegraut // .el-date-table-calendar td.disabled > div > div {
// Rand: 1px durchgezogen #aaa;
//Farbe: #fff;
//Rand: 5px;
// & > div:erstes-Kind {
// Hintergrundfarbe: #aaa;
// }
// & > div:n-tes-Kind(2) {
// Polsterung: 5px;
//Farbe: #000;
// .ivu-input-wrapper {
// Breite: 80 %;
// }
// }
// }
.el-date-table-calendar td.verfügbar:hover {
  Farbe: #000;
}
.el-date-table-calendar td.verfügbar.heute {
  Farbe: #000;
  Schriftstärke: normal;
}
.el-date-table-calendar tr td.current.available:nicht(.deaktiviert) {
  Hintergrundfarbe: #fff;
}
</Stil>

<Skript>
 Kalender importieren aus '../../components/calendar'
 Standard exportieren {
    Komponenten: { Kalender }
  }
  Daten() {
    zurückkehren {
      effektivesZeitlimit: '',
      RegelForm: {
        Preis: '',
        Konfigurationspreisliste: []
      }
      },
      Regeln:
      }
 }
    }
</Skript>

<el-form-item label="Preiseinstellungen" prop="calendarPrice">
 <Kalender
 :datedef="ruleForm.configPreisliste"
 :Standardpreis="Regelform.Preis"
 :effektivesZeitlimit="effektivesZeitlimit"
 ></Kalender>
</el-form-item>