簡易 Vue 評論框架的實現————父元件的實現

Canace22發表於2018-01-05
Vue框架元件

最近看到一個需求：

  1. 實現一個評論功能，要求對評論列表進行分頁顯示

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

  3. 能顯示釋出者、釋出時間以及內容

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

原始碼地址

評論表單程式碼：

<!-- 文件結構區開始 -->
<template>
    <div id="comment" >
        <UserDiv @transferUser="getInput" ></UserDiv>
        <CommentDiv :List="List"></CommentDiv>
        <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
    </div>
</template>
<!-- 文件結構區結束 -->

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

export default {
    //宣告元件名
    name: 'comment',

    //包含例項可用元件的雜湊表
    components: {
        UserDiv,
        PageDiv,
        CommentDiv
    },

    //宣告元件引數
    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 控制區結束 -->
複製程式碼

本文章來源於午安煎餅計劃Web組 - 初見

相關連結：

每日原始碼分析-Lodash(castArray.js)

每日原始碼分析-Lodash(after.js)

每日原始碼分析 – lodash(slice.js)

相關文章