Informationen zur Implementierung des Vue-Kommentar-Frameworks (Implementierung der übergeordneten Komponente)

In diesem Artikel wird hauptsächlich die Implementierung des einfachen Vue-Kommentar-Frameworks (Implementierung der übergeordneten Komponente) vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Ich habe kürzlich eine Anforderung gesehen:

1. Die Implementierung einer Kommentarfunktion erfordert eine paginierte Anzeige der Kommentarliste

2. Laut The Modul realisiert Komponentisierung

3. Es kann den Herausgeber, die Veröffentlichungszeit und den Inhalt anzeigen

Auf den ersten Blick ist es nicht schwierig, aber in der konkreten Implementierung Es sind immer noch einige Probleme aufgetreten. Da ich Vue zum ersten Mal verwende, bin ich außerdem verwirrt, wenn ich die Dokumentation lese. Lassen Sie uns ohne weitere Umschweife analysieren, wie jedes Modul implementiert wird.

Quellcode-Adresse

Kommentarformularcode:

<!-- 文档结构区开始 -->
<template>
  <p id="comment" >
    <Userp @transferUser="getInput" ></Userp>
    <Commentp :List="List"></Commentp>
    <Pagep @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></Pagep>
  </p>
</template>
<!-- 文档结构区结束 -->

<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import Userp from &#39;./commentInput.vue&#39;
import Pagep from &#39;./pagination.vue&#39;
import Commentp from &#39;./commentList.vue&#39;

export default {
  //声明组件名
  name: &#39;comment&#39;,

  //包含实例可用组件的哈希表
  components: {
    Userp,
    Pagep,
    Commentp
  },

  //声明组件参数
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //显示评论列表信息的方法
    getInput(msg) {
      //将评论信息保存到评论数组里
      this.totalData.push({ text: msg })
      //计算评论信息总条数长度
      this.totalCount = this.totalData.length

      //判断评论总数是否大于单页显示条数
      if (this.totalCount <= this.pagesize) {
       // 显示所有评论
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素进行显示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //点击评论按钮，默认跳转显示第一页内容
      this.currentPage = 1
      //评论列表倒序显示，即最新评论，显示在最上面
      this.List.reverse()

    },

    // 计算评论列表每一页的显示内容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //显示所有评论
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素进行显示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //评论列表倒序显示，即最新评论，显示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制区结束 -->

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Vue implementiert die Komponente, um nach oben backToTop zurückzukehren

Über den VUE-Region-Selektor (V -Distpicker )Einführung in die Verwendung von Komponenten

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierung des Vue-Kommentar-Frameworks (Implementierung der übergeordneten Komponente). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!