圖文介紹組件
- 新建GoodsDesc.vue和GoodsComment.vue兩個組件放置商品詳情的圖文介紹和評論界面
- 商品圖文介紹組件纹笼，是比較簡單的兩層標(biāo)題和圖文內(nèi)容結(jié)構(gòu)威沫，只需要設(shè)置字體大小和邊距顶岸，顏色，另外圖片寬度設(shè)置100%以免圖片過寬使之不能完全顯示
<div class="goodsdesc-container">
<h3> 標(biāo)題 </h3>
<hr>
<div><p></p>
<img src="../../images/xiaomi8.jpg" /></div>
</div>
商品評論組件
- 創(chuàng)建商品評論組件，只需要將設(shè)置好的評論組件引入即可，新創(chuàng)建一個評論組件可以方便其在多個頁面中直接調(diào)用
- 新建一個評論組件comment.vue滚躯，用于多個功能模塊中進(jìn)行重復(fù)利用，單獨(dú)封裝一個評論子組件
- 創(chuàng)建一個組件模塊嘿歌，在需要使用comment組建的頁面先手動導(dǎo)入comment組件
import comment from '../subcomponents/comment.vue'
- 在父組件中將導(dǎo)入的comment組件注冊為自己的子組件
components:{
comment
}
- 制作發(fā)表評論的輸入框掸掏，限制最大輸入字?jǐn)?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>
- 制作發(fā)表評論的樣式宙帝，包括評論樓數(shù)丧凤，用戶名，發(fā)表時間等信息步脓，并將這些非評論內(nèi)容設(shè)置為灰色背景
<div class="cmt-list">
<div class="cmt-item">
<div class="cmt-title">
第1樓 用戶：匿名用戶 發(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;
}
- 獲取所有的而評論數(shù)據(jù)顯示到頁面中,效驗(yàn)評論是否為空息裸，為空則toast提示用戶評論內(nèi)容不能為空，當(dāng)發(fā)表評論后沪编，重新刷新評論，顯示最新的評論
- 評論數(shù)據(jù)存放在localStorage中的localStorage.setItem(‘cmts’,’’)中年扩，localStorage只支持存放字符串?dāng)?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}}樓 用戶：{{item.user}} 發(fā)表時間：{{item.ctime|dateFormat('')}}
</div>
<div class="cmt-body">{{item.content}}</div>
</div>
</div>
- 當(dāng)輸入為空時彈出提示，請輸入內(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=''
}
},
- 定義好評論組件后其他頁面可以直接調(diào)用
<cmtbox></cmtbox>
import cmtbox from '../subcomponents/comment.vue'
export default {
name: "",
components:{
cmtbox
}
}
