图文介绍组件

1. 新建GoodsDesc.vue和GoodsComment.vue两个组件放置商品详情的图文介绍和评论界面
2. 商品图文介绍组件，是比较简单的两层标题和图文内容结构，只需要设置字体大小和边距，颜色，另外图片宽度设置100%以免图片过宽使之不能完全显示

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

---

商品评论组件

1. 创建商品评论组件，只需要将设置好的评论组件引入即可，新创建一个评论组件可以方便其在多个页面中直接调用
2. 新建一个评论组件comment.vue，用于多个功能模块中进行重复利用，单独封装一个评论子组件
   
3. 创建一个组件模块，在需要使用comment组建的页面先手动导入comment组件

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

4. 在父组件中将导入的comment组件注册为自己的子组件

components:{
    comment
}

5. 制作发表评论的输入框，限制最大输入字数，使用mint-ui制作发表评论和加载评论按钮

<textarea placeholder="请输入评论内容(最多120字)" maxlength="120" >

</textarea>
<mt-button type="primary" size="large">发表评论</mt-button>

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

6. 制作发表评论的样式，包括评论楼数，用户名，发表时间等信息，并将这些非评论内容设置为灰色背景

<div class="cmt-list">
    <div class="cmt-item">
        <div class="cmt-title">
            第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：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. 获取所有的而评论数据显示到页面中,效验评论是否为空，为空则toast提示用户评论内容不能为空，当发表评论后，重新刷新评论，显示最新的评论
8. 评论数据存放在localStorage中的localStorage.setItem(‘cmts’,’’)中，localStorage只支持存放字符串数据，要先调用JSON.stringify将评论转化为数组字符串

<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;发表时间：{{item.ctime|dateFormat('')}}
        </div>
        <div class="cmt-body">{{item.content}}</div>
    </div>
</div>

9. 当输入为空时弹出提示，请输入内容，只有输入内容才能评论

add(){
    if(this.content===''){
        Toast("请输入内容")

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

10. 定义好评论组件后其他页面可以直接调用

<cmtbox></cmtbox>

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

---