摘要：本篇文章我們進一步深入項目設(shè)計評價組件。使得組件更加便于維護。路徑配置內(nèi)自動補全設(shè)置通過重命名設(shè)置對組件導入模塊時進行了重命名。全部有圖點評使用引入的組件組件就是上圖標記的分隔線。

在上篇文章我們將項目頭部模塊進行了編寫與數(shù)據(jù)渲染。

本篇文章我們進一步深入項目設(shè)計評價組件。

分析頁面

如圖所示，點菜，評價，商家，為導航，我們點擊評價的時候，直接跳轉(zhuǎn)評價頁面。

評價頁面由商家評分一欄，評論列表構(gòu)成，評論列表支持：全部，有圖，點評三種篩選。

綜上我們現(xiàn)在開始設(shè)計評論組件：

建立組件文件夾

1.css圖片的存放

針對組件引用的圖片可能產(chǎn)生變動性，我們將組件內(nèi)的圖片放入組件文件夾內(nèi)，進行引用。使得組件更加便于維護。

2.路徑配置

build/webpack.base.conf.js內(nèi)：

alias: {
    "vue$": "vue/dist/vue.esm.js",//自動補全設(shè)置
    "@": resolve("src"),
    "components": resolve("./src/components")
}

通過alias重命名設(shè)置對組件導入模塊時進行了重命名。

實際在導入需要的組件寫法：

// 舉個例子，導入Ratings組價可以寫成
    import Ratings from "components/Ratings/Ratings"

圖片存放，路徑配置完成以后我們建立Ratings文件夾并進入：

根據(jù)分析頁面結(jié)構(gòu)整理以后所以我們先把頁面結(jié)構(gòu)搭建出來：

在Ratings.vue中：

//設(shè)置容器存放評論組件

現(xiàn)在我們設(shè)計商家評分，口味，包裝，等結(jié)構(gòu)如下圖：

    

        

            
{{ratings.comment_score}}
            
商家評分
        
        

            

                口味
                
                {{ratings.quality_score}}
            
            

                包裝
                
                {{ratings.pack_score}}
            
        
    
    

        

            
{{ratings.delivery_score}}
            
配送評分
        
    

實現(xiàn)評論中選項卡（全部，有圖，點評），列表頁面：

                

                    
                        {{ratings.tab[0].comment_score_title}}
                    
                    
                        {{ratings.tab[1].comment_score_title}}
                    
                    
                        
                        
                        {{ratings.tab[2].comment_score_title}}
                    
                

                

                    0}">
                        {{item.content}}{{item.label_count}}
                    
                
                //評論列表
                

                    

                        

                            
                            
                        
                        

                            

                                {{comment.user_name}}
                            
                            

                                {{fotmatDate(comment.comment_time)}}
                            
                            

                                評分
                                
                            
                            

                            

                                
                            
                        
                    
                
            

結(jié)構(gòu)搭建完成，下面我們?yōu)榻M件傳入對應的數(shù)據(jù)。

父子組件通信

Ratings.vue

導入依賴的子組件：

    //設(shè)置選項卡變量
    const ALL = 2; // 全部 
    const PICTURE = 1; // 帶圖片
    const COMMENT = 0; // 點評

下面我們開始初始化data，在created鉤子內(nèi)發(fā)起請求。

ratings數(shù)據(jù)部分展示：

   
    export default {
        data() {
            return {
                ratings: {},//存放請求到的數(shù)據(jù)
                selectType: ALL,//默認展示全部
            }
        },
        created() {
            // 通過axios發(fā)起get請求
            let that = this;
            this.$axios.get("/api/ratings")
                .then(function(response) { // 獲取到數(shù)據(jù)
                    var dataSource = response.data;
                    if(dataSource.code == 0) {
                        that.ratings = dataSource.data;//將請求到的數(shù)據(jù)引用到data（）中
                        // 初始化滾動
                        that.$nextTick(() => {
                            if(!that.scroll) {
                                that.scroll = new BScroll(that.$refs.ratingView, {
                                    click: true
                                });
                            } else {
                                that.scroll.refresh();
                            }
                        });
                    }

                })
                .catch(function(error) { // 出錯處理
                    console.log(error);
                });
        }
    }
    

注意$refs與設(shè)置容器中的ref="ratingView"我們用BScroll來操作dom，所以使用了vue的ref API

https://cn.vuejs.org/v2/api/#ref

        methods: {
            selectTypeFn(type) {
                this.selectType = type;

                // 刷新操作
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
            },
            fotmatDate(time) {
                let date = new Date(time * 1000);

                // 時間格式
                let fmt = "yyyy.MM.dd";

                if(/(y+)/.test(fmt)) { // 年
                    let year = date.getFullYear().toString();
                    fmt = fmt.replace(RegExp.$1, year);
                }
                if(/(M+)/.test(fmt)) { // 月
                    let mouth = date.getMonth() + 1;
                    if(mouth < 10) {
                        mouth = "0" + mouth;
                    }
                    fmt = fmt.replace(RegExp.$1, mouth);
                }
                if(/(d+)/.test(fmt)) { // 日
                    let mydate = date.getDate();
                    if(mydate < 10) {
                        mydate = "0" + mydate;
                    }
                    fmt = fmt.replace(RegExp.$1, mydate);
                }

                return fmt;
            },
            commentStr(content) {
                let rel = /#[^#]+#/g;
                return content.replace(rel, "$&");
            }
        }

在methods中我們定義：

selectTypeFn(type) 在template中點擊事件執(zhí)行的切換函數(shù)；

fotmatDate（time）設(shè)置時間展示格式函數(shù)；

commentStr（content）插入文本函數(shù)；

注意selectTypeFn函數(shù)內(nèi)在我們點擊對應的選項卡后使用 $nextTick（）條用scroll刷新列表；

$nextTick()https://cn.vuejs.org/v2/guide...

通過計算屬性將數(shù)據(jù)傳入class為rating-list模板中：

selectType的值決定了評論列表展示的數(shù)據(jù)內(nèi)容

需要再次注意方法與計算屬性調(diào)用方法等區(qū)別，之前我們對比過，需要詳細了解，還請閱讀之前文章，或官方文檔。

        computed: {
            selectComments() {
                if(this.selectType == ALL) { // 全部
                    return this.ratings.comments;
                } else if(this.selectType == PICTURE) { // 有圖
                    let arr = [];
                    this.ratings.comments.forEach((comment) => {
                        if(comment.comment_pics.length) {
                            arr.push(comment);
                        }
                    });
                    return arr;
                } else { // 點評
                    return this.ratings.comments_dp.comments;
                }
            }
        },

使用引入的組件：

        components: {
            Star,
            Split,
            BScroll
        }

Split組件就是上圖標記的分隔線。

星級評分的邏輯實現(xiàn)

新建Star文件

星星展示形式為 全星，半星，無星 通過for循環(huán)搭建好star結(jié)構(gòu)：

通過props接受父組件傳來的score值，并在star內(nèi)使用，

通過計算屬性對star內(nèi)的score進行處理，

到此我們從評價組件的頁面分析，拆出了合理的模板結(jié)構(gòu)，接著配置圖片，組件引用的路徑，節(jié)省了我們在開發(fā)中的時間，最后也是最重要的是數(shù)據(jù)的渲染，以及星級評分的實現(xiàn)。過程中，我們再次加深對vue的props，methods，computed，$nextTick()等理解。

以上就是本篇全部內(nèi)容，下篇我們將會細化商品展示頁面，我們下篇見。