Vue implementiert die Bildfrequenzwiedergabe des Karussells

<Vorlage>
 <div id="imgPlay" ref="container" :style="[Stil]">
 <img :src="imgsrc" :style="[{height:style.height,width:style.width}]">
 <div id="aber">
  <button @click="start()">Starten</button>
  <button @click="stop()">Stopp</button>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "ZxImgPlay",
 Daten () {
 zurückkehren {
  Stil:[
 Breite: "50px",
 Höhe: "50px"
 ],
  Intervall: null, // Timer-ID
  flag: true, // Zeitschalter setIntervalNumber: 0, // Aktuell angezeigtes Bild subscript imgsrc: "", // Anzuzeigender Bildpfad imgUrls: [], // Alle Bildpfade frameRate: 0 // Bildrate }
 },
 berechnet: {},
 betrachten: {},
 erstellt () { },
 montiert () {
 dies.zxInit()
 },
 vorZerstören () { },

 Methoden: {
 zxInit() {
 //This.DisplayParam ist eine Menge von Dingen innerhalb des Unternehmens, und das gemischte Objekt //this.DisplayParam.frameRate ist ein Array ["Verzeichnisname 1", "Verzeichnisname 2"]
 // this.DisplayParam.imgUrls ist ein totes Bild. Wenn kein Verzeichnis vorhanden ist, wird das tote Bild verwendet. // this.DisplayParam.frameRate ist die eingehende Bildrate this.frameRate = this.DisplayParam.frameRate && (1000 / this.DisplayParam.frameRate)
  dies.imgUrls = dies.DisplayParam.imgUrls
  this.DisplayParam.imageFileName != 0 ? this.readdir(this.DisplayParam.imageFileName) : this.showImages(true)
 },

 Start () {
  wenn (dieses.flag) return
  dies.showImages()
  dieses.flag = wahr
 },

 stoppen () {
  this.flag = falsch
  Intervall löschen(dieses.Intervall)
 },

 readImages(Bilddateiname, _A) {
  dies.stopp()
  let req = require.context("@/../static/images", true, /\.(?:bmp|jpg|gif|jpeg|png)$/).keys();
  let Pfad = neuer RegExp(Bilddateiname[_A])
  req.forEach(item => {
  wenn (Pfad.Test(Element)) {
   this.imgUrls.push({ img: "@/../static/images/" + imageFileName[_A] + item.substring(item.lastIndexOf('/')) })
  }
  })
  dies.showImages()
 },
 readdir (Bilddateiname) {
  diese.imgUrls = []
  für (lass i = 0; i < Bilddateiname.Länge; i++) {
  dies.readImages(Bilddateiname, i)
  }
 },

 zeigeBilder(_B) {
  wenn (_B) this.imgUrls = this.imgUrlsSort(this.imgUrls, 'sort')
  Konsole.log(diese.imgUrls)
  dieses.Intervall = setzeIntervall(dieses.setIntervalFun, diese.FrameRate)
 },

 imgUrlsSort (ary, Schlüssel) {
  return ary.sort((a, b) => {
  sei x = a[Schlüssel];
  sei y = b[Schlüssel];
  Rückgabe ((x < y) ? -1 : (x > y) ? 1 : 0)
  })
 },

 setzeIntervalFun () {
  wenn (this.setIntervalNumber >= this.imgUrls.length) {
  this.setIntervalNumber = 0
  }
  dies.imgsrc = dies.imgUrls[diese.setIntervalNumber++].img || ''
 }
 }
}
</Skript>