Vue implementiert Chat-Schnittstelle

Mock von „mockjs“ importieren
Mock.mock("/chatchild",{
    'Ergebnis':[
        {
            ID: "001",
            imgurl:"/static/bild/10.jpg",
            Name:"XKDK",
            Datum: "09:23",
            Worte: „Haha, ok“
        },
        // ... ...
    ]
});
Standard-Mock exportieren

let usermsg = {
    ID: "122",
    imgurl:"/static/bild/8.jpg",
    Worte:"Ja!",
    Daten:{
        ID: "1529",
        imgurl:"/static/bild/7.jpg",
        Name:"Yi An Jushi",
        Wörter:[
            {info:"Bist du da?"},
            {info:"Nicht in"},
            {info:"Haben Sie den Entwurf abgeschickt?"},
            {info:"Ich schaue seit heute Mittag Fernsehserien"},
            {info:"Ich habe herausgefunden, dass ich eigentlich ein Stubenhocker bin"},
            {info:"Hahaha"},
            {info:"Lass uns zusammen essen gehen, wenn ich Zeit habe"},
            {info:"hmm"},
            {info:"Es wird sowieso keine großen Auswirkungen haben"}
        ]
    }
}
Standard-Benutzernachricht exportieren

Vue von „vue“ importieren
Router von „vue-router“ importieren
Chat aus „../components/Chat.vue“ importieren
ChatDetail aus „../components/Pages/ChatDetail.vue“ importieren

Vue.use(Router)

exportiere standardmäßig einen neuen Router({
  Routen: [
    {
      Pfad: '/Chat ',
      Komponente: Chat 
    },
    {
      Pfad: '/ChatDetail',
      Komponente:ChatDetail
    }
  ]
})

// Code zum Beheben von Routing-Fehlern const originalPush = Router.prototype.push
Router.prototype.push = Funktion Push(Standort) {
    gebe originalPush.call(diesen, Standort).catch(err => err) zurück
}

<Vorlage>
  <div id="chat">
    <Unten />
    <Header:name="Nachricht" />
    <div Klasse="chat_alluser">
      <div ref="Chatbenutzer" @click="checkChild(index)" class="Chatbenutzer" v-for="(Element,Index) im Chat" :Schlüssel="Index">
        <ChatChild :imgsrc="item.imgurl" :nickname="item.name" :time="item.date" :word="item.words" />
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere Bottom aus "../components/Menu/Bottom";
Header aus "../components/Menu/Header" importieren;
ChatChild aus "../components/Pages/ChatChild" importieren;
Standard exportieren {
  Name: "Chat",
  Komponenten:
    Unten: Unten,
    Kopfzeile: Kopfzeile,
    ChatChild: ChatChild
  },
  Daten() {
    zurückkehren {
      Nachricht: „WeChat“,
      Chat: null,
      Name: null
    };
  },
  montiert() {
    dies.$axios.get("/chatchild").then(res => {
      dieser.chat = res.data.result;
    });
  },
  Methoden: {
    checkChild(index) {
      dies.$refs.chatuser[index].style.backgroundColor = "rgb(240,240,240)";
      // Nachdem das Rendern des dynamischen DOM-Elements abgeschlossen ist, zu einer anderen Schnittstelle springen (ChatDetail)
      // Den dynamischen Namen abrufen
      lass Benutzername = this.chat[index].name;
      dies.$nextTick(() => {
        dies.$router.push({
          Pfad: "/ChatDetail",
          Abfrage: { Name: Benutzername }
        });
      });
    }
  }
};
</Skript>

<style lang="scss" scope>
#chat {
  Breite: 100 %;
  .chat_alluser {
    Rand unten: 7,5rem;
    .chatuser {
      Position: relativ;
      oben: 3,5rem;
      Polsterung: 0,3rem 0;
    }
  }
}
</Stil>

<Vorlage>
  <div id="chatchild">
    <div Klasse="Foto">
      <img :src="imgsrc" alt />
    </div>
    <div Klasse="Inhalt">
      <div>
          <span class="content_nickname">{{Spitzname}}</span>
          <span class="content_time">{{Zeit}}</span>
      </div>
      <span class="content_word">{{Wort}}</span>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "ChatChild",
  Requisiten:{
    'imgsrc':Zeichenfolge,
    'Spitzname':Zeichenfolge,
    'Zeit':Zeichenfolge,
    "Wort":Zeichenfolge
  }
};
</Skript>

<style lang="scss" scope>
#chatkind {
  Breite: 100 %;
  Höhe: 5rem;
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Box-Größe: Rahmenbox;
  .Foto {
    biegen: 1;
    Höhe: 5rem;
    img{
        Objekt-Passung: Abdeckung;
        Breite: 4rem;
        Höhe: 4rem;
        Rahmenradius: 5px;
        Anzeige: Block;
        Rand: 0 automatisch;
        Rand oben: 0,5rem;
        Rand links: 1rem;
    }
  }
  .Inhalt {
    Flexibilität: 4;
    Höhe: 5rem;
    Rahmen unten: 0,5px durchgezogenes RGB (240, 240, 240);
    Polsterung links: 0,5rem;
    Polsterung oben: 0,5rem;
    Box-Größe: Rahmenbox;
    div{
      .inhalt_nickname{
        Anzeige: Inline-Block;
        Schriftgröße: 1,1rem;
        Rand oben: 0,3rem;
      }
      .inhalt_zeit{
        schweben: rechts;
        Rand rechts: 1rem;
        Farbe: RGB (209, 206, 206);
        Schriftgröße: 0,8rem;
      }
    }
    .Inhaltswort{
      Farbe: RGB (209, 206, 206);
      Schriftgröße: 0,8rem;
      Anzeige: Block;
      Rand oben: 0,5rem;
    }
  }
}
</Stil>

<Vorlage>
  <div id="chatdetail">
    <div Klasse="chattop">
      <div @click="zurückgehen" class="chattop_back">
        <icon-svg icon-class="houtui_shangyibu_zuojiantou_shangyiye" />
      </div>
      <div Klasse = "Chattop_Name">{{Name}}</div>
      <div Klasse="chattop_more">
        <icon-svg icon-class="gengduo" />
      </div>
    </div>
    <div Klasse="Chatinhalt">
      <ChatMsg ref="chatmsg" />
    </div>
    <div Klasse="Chatfußzeile">
      <div @click="changeSound">
        <icon-svg:icon-class="istsound" />
      </div>
      <div>
        <input ref="sendcontent" @keypress="sendmsg" :type="istype" :value="isvalue" />
      </div>
      <div>
        <icon-svg icon-class="biaoqing" />
      </div>
      <div>
        <icon-svg icon-class="del" />
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
ChatMsg aus "./ChatMsg" importieren;
Standard exportieren {
  Name: "ChatDetail",
  Daten() {
    zurückkehren {
      Name: null,
      issound: "xiaoxitongzhi",
      istype: "Text",
      istWert: "",
      isshow: falsch,
      tomsg: "",
      msgchild: null
    };
  },
  Komponenten:
    Chatnachricht: Chatnachricht
  },
  montiert() {
    dieser.name = dies.$route.query.name;
    dies.msgchild = dies.$refs.chatmsg;
  },
  Methoden: {
    // Führe die Return-Operation aus goback() {
      dies.$router.go(-1);
    },
    // Eingabetyp wechseln changeSound() {
      // Definieren Sie eine Variable isshow:false in den Daten und verwenden Sie this.isshow und !this.isshow zum Wechseln, wenn (!this.isshow) {
        dies.isshow = wahr;
        dies.issound = "yuyin";
        this.istype = "Schaltfläche";
        this.isvalue = "Zum Sprechen gedrückt halten";
      } anders {
        dies.isshow = falsch;
        dies.issound = "xiaoxitongzhi";
        this.istype = "Text";
        dies.istWert = "";
      }
    },
    // Nachricht senden sendmsg(e) {
      // 1. Verwenden Sie ref, um das Eingabetextfeld für die Eingabe des Antwortinhalts zu definieren, und definieren Sie die Variable sendcontent, um ihren Wert (den Eingabeinhalt) zu erhalten.
      Lassen Sie sendcontent = this.$refs.sendcontent.value;
      wenn (e.keyCode === 13 && sendcontent.split(" ").join("").length !== 0) {
        // 2. Verwenden Sie tomsg, um den Sendcontent (den im Textfeld eingegebenen Wert) in der ChatDetail-Komponente (übergeordnet) zu empfangen. this.tomsg = sendcontent;
        // 3. Definieren Sie die ChatMsg-Komponente (untergeordnet) mit ref und verwenden Sie $refs, um sie in gemounteter Form abzurufen, d. h. this.msgchild
        // 4. Rufen Sie die Methode in der untergeordneten Komponente auf und übergeben Sie tomsg an die (untergeordnete) ChatMsg-Komponente (spezifischer Chat-Inhalt) this.msgchild.saveMsg(this.tomsg);
        // 5. Nachdem Sie eine Nachricht gesendet haben, müssen Sie das Textfeld this.$refs.sendcontent.value = "" löschen;
        // Wenn Sie die Eingabetaste drücken, rufen Sie die Zufallsnachrichtenmethode der untergeordneten Komponente this.msgchild.randomMsg() auf.
      }
    }
  }
};
</Skript>

<style lang="scss" scope>
#chatdetail {
  Position: relativ;
  Hintergrundfarbe: rgb(238, 212, 238);
  .chattop {
    Position: fest;
    oben: 0;
    links: 0;
    Z-Index: 10;
    Breite: 100 %;
    Höhe: 3,5rem;
    Zeilenhöhe: 3,5rem;
    Hintergrundfarbe: rgb(240, 240, 240) !wichtig;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    .chattop_back {
      biegen: 1;
      Rand links: 1rem;
    }
    .chattop_name {
      Flexibilität: 20;
      Textausrichtung: zentriert;
    }
    .chattop_mehr {
      biegen: 1;
      Rand rechts: 1rem;
    }
  }
  .chatinhalt {
    Breite: 100 %;
    Höhe: 100%;
  }
  .chatfooter {
    Position: fest;
    links: 0;
    unten: 0;
    Z-Index: 10;
    Breite: 100 %;
    Höhe: 3,5rem;
    Zeilenhöhe: 3,5rem;
    Textausrichtung: zentriert;
    Hintergrundfarbe: rgb(240, 240, 240) !wichtig;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    div:n-tes-Kind(1),
    div:n-tes-Kind(3),
    div:n-tes-Kind(4) {
      biegen: 1;
      svg {
        Schriftgröße: 1,5rem;
        Rand oben: 0,9rem;
      }
    }
    div:n-tes-Kind(2) {
      Flexibilität: 5;
      Eingabe {
        Breite: 100 %;
        Höhe: 2,5rem;
        Gliederung: keine;
        Polsterung links: 0,5rem;
        Box-Größe: Rahmenbox;
        Höhe: 2,5rem;
        Rand oben: 0,5rem;
        Rahmenstil: keiner;
        Schriftgröße: 0,9rem;
        Rahmenradius: 4px;
        Hintergrundfarbe: #fff;
        Farbe: #000;
      }
    }
  }
}
</Stil>

<Vorlage>
  <div id="chatmsg" ref="msg">
    <!-- Dynamische Erstellung -->
    <div v-for="(Element, Index) in Listen" :key="index">
      <div v-if="item.id==122" class="Benutzer">
        <div v-scroll>
          <img :src="item.face" alt />
          <div Klasse="Blase">
            <span>{{item.word}}</span>
          </div>
        </div>
      </div>
      <div v-if="item.id==1529" class="touser">
        <div v-scroll>
          <img :src="item.face" alt />
          <div Klasse="tobubble">
            <span>{{item.word}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere Benutzerinformationen aus "./userinfo";
Standard exportieren {
  Name: "ChatMsg",
  Daten() {
    zurückkehren {
      Benutzerbild: "",
      Listen: []
    };
  },
  montiert() {
    diese.Benutzer-ID = Benutzerinfo.ID;
    dies.userimg = Benutzerinfo.imgurl;
  },
  // vue scrollt automatisch zum Ende der Direktiven: {
    scrollen: {
      eingefügt(el) {
        el.scrollIntoView();
      }
    }
  },
  Methoden: {
    Nachricht speichern(tomsg) {
      diese.lists.push({
        ID: diese.Benutzer-ID,
        Gesicht: this.userimg,
        Wort: tomsg
      });
    },
    ZufallsMsg() {
      lass zuuserdata = userinfo.data;
      diese.lists.push({
        ID: touserdata.id,
        Gesicht: touserdata.imgurl,
        Wort:
          touserdata.words[Math.floor(Math.random() * touserdata.words.length)]
            .Info
      });
    }
  }
};
</Skript>

<style lang="scss" scope>
#chatmsg {
  Position: relativ;
  oben: 3,5rem;
  Breite: 100 %;
  Mindesthöhe: 44rem;
  Hintergrundfarbe: rgb(238, 212, 238);
  Rand unten: 3,5rem;
  Überlauf-x: versteckt;
  Überlauf-y: automatisch;
  .Benutzer {
    Position: relativ;
    Breite: 100 %;
    Überlauf: versteckt;
    Rand: 0,8rem 0;
    img {
      Objekt-Passung: Abdeckung;
      Breite: 3rem;
      Höhe: 3rem;
      Rahmenradius: 3px;
      schweben: rechts;
      Rand rechts: 1rem;
    }
    .blase {
      Position: relativ;
      schweben: rechts;
      Rand rechts: 1rem;
      Polsterung: 0,8rem;
      Box-Größe: Rahmenbox;
      Rahmenradius: 3px;
      maximale Breite: 65 %;
      Hintergrundfarbe: rgb(116, 228, 116);
      Spanne {
        Höhe: 1,25rem;
        Zeilenhöhe: 1,25rem;
      }
    }
    .bubble::nach {
      Position: absolut;
      rechts: -1,3rem;
      oben: 0,8rem;
      Inhalt: "";
      Breite: 0;
      Höhe: 0;
      Rand: 0,7rem durchgezogen;
      Rahmenfarbe: transparent transparent transparent rgb(116, 228, 116);
    }
  }
  .touser {
    Position: relativ;
    Breite: 100 %;
    Überlauf: versteckt;
    Rand: 0,8rem 0;
    img {
      Objekt-Passung: Abdeckung;
      Breite: 3rem;
      Höhe: 3rem;
      Rahmenradius: 3px;
      schweben: links;
      Rand links: 1rem;
    }
    .zublasen {
      Position: relativ;
      schweben: links;
      Rand links: 1rem;
      Polsterung: 0 0,7rem;
      Box-Größe: Rahmenbox;
      Rahmenradius: 3px;
      maximale Breite: 65 %;
      Hintergrundfarbe: rgb(116, 228, 116);
      Zeilenhöhe: 3rem;
    }
    .tobubble::nach {
      Position: absolut;
      links: -1,3rem;
      oben: 0,8rem;
      Inhalt: "";
      Breite: 0;
      Höhe: 0;
      Rand: 0,7rem durchgezogen;
      Rahmenfarbe: transparent rgb(116, 228, 116) transparent transparent;
    }
  }
}
</Stil>