À propos de l'implémentation du framework de commentaires Vue (implémentation du composant parent)

Cet article présente principalement l'implémentation du framework de commentaires simple Vue (implémentation du composant parent). Le contenu est assez bon, je vais le partager avec vous maintenant et le donner 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 l'intégralité du contenu de cet article, j'espère qu'il sera utile pour l'apprentissage de tout le monde Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Vue implémente le composant pour revenir en haut backToTop

À propos du sélecteur de région VUE (V -Distpicker )Introduction à l'utilisation des composants

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!