簡易Vue評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))

更新時(shí)間：2018年01月08日 13:48:49 作者：Canace22

本篇文章主要介紹了簡易 Vue 評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近看到一個(gè)需求：

實(shí)現(xiàn)一個(gè)評(píng)論功能，要求對(duì)評(píng)論列表進(jìn)行分頁顯示
對(duì)相應(yīng)模塊實(shí)現(xiàn)組件化
能顯示發(fā)布者、發(fā)布時(shí)間以及內(nèi)容

乍一看不是很難，但是在具體的實(shí)現(xiàn)上還是遇到了一些問題。此外，因?yàn)榈谝淮问褂?vue ，看文檔看的也是一臉懵逼，話不多說，下面來分析一下，具體每個(gè)模塊是怎么實(shí)現(xiàn)的。

源碼地址

評(píng)論表單代碼：

<!-- 文檔結(jié)構(gòu)區(qū)開始 -->
<template>
  <div id="comment" >
    <UserDiv @transferUser="getInput" ></UserDiv>
    <CommentDiv :List="List"></CommentDiv>
    <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
  </div>
</template>
<!-- 文檔結(jié)構(gòu)區(qū)結(jié)束 -->

<!-- js 控制區(qū)開始 -->
<script>
//引入組件 commentInput、commentList、pagination
import UserDiv from './commentInput.vue'
import PageDiv from './pagination.vue'
import CommentDiv from './commentList.vue'

export default {
  //聲明組件名
  name: 'comment',

  //包含實(shí)例可用組件的哈希表
  components: {
    UserDiv,
    PageDiv,
    CommentDiv
  },

  //聲明組件參數(shù)
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //顯示評(píng)論列表信息的方法
    getInput(msg) {
      //將評(píng)論信息保存到評(píng)論數(shù)組里
      this.totalData.push({ text: msg })
      //計(jì)算評(píng)論信息總條數(shù)長度
      this.totalCount = this.totalData.length

      //判斷評(píng)論總數(shù)是否大于單頁顯示條數(shù)
      if (this.totalCount <= this.pagesize) {
       // 顯示所有評(píng)論
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素進(jìn)行顯示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //點(diǎn)擊評(píng)論按鈕，默認(rèn)跳轉(zhuǎn)顯示第一頁內(nèi)容
      this.currentPage = 1
      //評(píng)論列表倒序顯示，即最新評(píng)論，顯示在最上面
      this.List.reverse()

    },

    // 計(jì)算評(píng)論列表每一頁的顯示內(nèi)容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //顯示所有評(píng)論
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素進(jìn)行顯示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //評(píng)論列表倒序顯示，即最新評(píng)論，顯示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制區(qū)結(jié)束 -->

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: