Comment implémenter un framework de commentaires à l'aide de Vue

Cet article présente principalement l'implémentation du framework de commentaires simple Vue (implémentation du composant parent). Maintenant, je le partage avec vous et le donne comme référence.

J'ai récemment vu une exigence :

1. La mise en œuvre d'une fonction de commentaire nécessite un affichage paginé de la liste des commentaires

2. Selon The le module réalise la composantisation

3. Il peut afficher l'éditeur, l'heure de publication et le contenu

Ce n'est pas difficile à première vue, mais dans la mise en œuvre spécifique J'ai quand même rencontré quelques problèmes. De plus, comme c'est la première fois que j'utilise vue, je suis confus lorsque je lis la documentation. Sans plus tarder, analysons comment chaque module est implémenté.

Adresse du code source

Code du formulaire de commentaire :

<!-- 文档结构区开始 -->
<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 控制区结束 -->

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile dans le. avenir.

Articles connexes :

Comment implémenter la capture de pages Web pour les enveloppes rouges en Javascript

Introduction détaillée aux composants d'ordre élevé dans React

Interprétation détaillée du modèle de rendu backend React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!