圖文介紹組件

1. 新建GoodsDesc.vue和GoodsComment.vue兩個組件放置商品詳情的圖文介紹和評論界面
2. 商品圖文介紹組件，是比較簡單的兩層標題和圖文內(nèi)容結構，只需要設置字體大小和邊距，顏色，另外圖片寬度設置100%以免圖片過寬使之不能完全顯示

<div class="goodsdesc-container">
    <h3>  標題 </h3>
    <hr>
    <div><p></p>
        <img src="../../images/xiaomi8.jpg" /></div>
</div>

商品評論組件

1. 創(chuàng)建商品評論組件，只需要將設置好的評論組件引入即可，新創(chuàng)建一個評論組件可以方便其在多個頁面中直接調(diào)用
2. 新建一個評論組件comment.vue，用于多個功能模塊中進行重復利用，單獨封裝一個評論子組件
   
3. 創(chuàng)建一個組件模塊，在需要使用comment組建的頁面先手動導入comment組件

import comment from '../subcomponents/comment.vue'

4. 在父組件中將導入的comment組件注冊為自己的子組件

components:{
    comment
}

5. 制作發(fā)表評論的輸入框，限制最大輸入字數(shù)，使用mint-ui制作發(fā)表評論和加載評論按鈕

<textarea placeholder="請輸入評論內(nèi)容(最多120字)" maxlength="120" >

</textarea>
<mt-button type="primary" size="large">發(fā)表評論</mt-button>

<mt-button type="danger" size="large" plain>加載更多</mt-button>

6. 制作發(fā)表評論的樣式，包括評論樓數(shù)，用戶名，發(fā)表時間等信息，并將這些非評論內(nèi)容設置為灰色背景

<div class="cmt-list">
    <div class="cmt-item">
        <div class="cmt-title">
            第1樓&nbsp;&nbsp;用戶：匿名用戶&nbsp;&nbsp;發(fā)表時間：2019-1-1 12:30:50
        </div>
        <div class="cmt-body"></div>
    </div>
</div>

.cmt-container h3{
    font-size: 18px;
}
.cmt-container textarea{
    font-size: 14px;
    height: 85px;
    margin: 0;
}
.cmt-list{
    margin: 10px 0;
}
.cmt-item{
    font-size: 13px;
}
    .cmt-title{
        line-height: 30px;
        background-color: #ccc;
    }
    .cmt-body{
        line-height: 35px;
        text-indent: 2em;
    }

7. 獲取所有的而評論數(shù)據(jù)顯示到頁面中,效驗評論是否為空，為空則toast提示用戶評論內(nèi)容不能為空，當發(fā)表評論后，重新刷新評論，顯示最新的評論
8. 評論數(shù)據(jù)存放在localStorage中的localStorage.setItem(‘cmts’,’’)中，localStorage只支持存放字符串數(shù)據(jù)，要先調(diào)用JSON.stringify將評論轉(zhuǎn)化為數(shù)組字符串

<div class="cmt-list">
    <div class="cmt-item" v-for="item in list" :key="item.ctime">
        <div class="cmt-title" v-once>
            第{{flo}}樓&nbsp;&nbsp;用戶：{{item.user}}&nbsp;&nbsp;發(fā)表時間：{{item.ctime|dateFormat('')}}
        </div>
        <div class="cmt-body">{{item.content}}</div>
    </div>
</div>

9. 當輸入為空時彈出提示，請輸入內(nèi)容，只有輸入內(nèi)容才能評論

add(){
    if(this.content===''){
        Toast("請輸入內(nèi)容")

    }else {
        this.list.push({user: '匿名用戶', ctime: Date.now(), content: this.content})
        //添加完成后清空輸入框
        this.flo++
        this.content=''
    }
},

10. 定義好評論組件后其他頁面可以直接調(diào)用

<cmtbox></cmtbox>

import cmtbox from '../subcomponents/comment.vue'
export default {
    name: "",
    components:{
        cmtbox
    }
}