首頁  >  文章  >  web前端  >  關於Vue評論框架的實作(父元件的實作)

關於Vue評論框架的實作(父元件的實作)

不言
不言原創
2018-06-29 15:47:452488瀏覽

本篇文章主要介紹了簡易 Vue 評論框架的實作(父元件的實作),內容挺不錯的,現在分享給大家,也給大家做個參考。

最近看到一個需求:

  1. 實作一個評論功能,要求對評論清單進行分頁顯示

  2. 對相應模組實作元件化

  3. 能顯示發佈者、發佈時間以及內容

乍一看不是很難,但在具體的實作上還是遇到了一些問題。此外,因為第一次使用 vue ,看文件看的也是一臉懵逼,話不多說,下面來分析一下,具體每個模組是怎麼實現的。

原始碼位址

評論表單程式碼:

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

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

Vue實作傳回頂部backToTop的元件

關於VUE-地區選擇器(V-Distpicker )元件的使用介紹

#

以上是關於Vue評論框架的實作(父元件的實作)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn