發(fā)表評(píng)論

把文本框做雙向數(shù)據(jù)綁定
<textarea placeholder="請(qǐng)輸入內(nèi)容" maxlength="120" v-model="msg"></textarea>
data中 msg: “” // 評(píng)論 輸入的內(nèi)容

為發(fā)表按鈕綁定一個(gè)事件
<mt-button type="primary" size="large" @click="postComment">發(fā)表評(píng)論</mt-button>

校驗(yàn)評(píng)論內(nèi)容是否為空，如果為空，則Toast提示用戶 評(píng)論內(nèi)容不能為空
main.js中Vue.http.options.root下面寫

//使用ajax的post方式時(shí)，第三個(gè)參數(shù)一般都是一樣的，所以每次都重寫，還不如全局定義一下，就省略這個(gè)重復(fù)寫的過(guò)程。 // 全局設(shè)置 post 時(shí)候表單數(shù)據(jù)格式組織形式 application/x-www-form-urlencoded Vue.http.options.emulateJSON = true;

通過(guò) vue-resource 發(fā)送一個(gè)請(qǐng)求，把評(píng)論內(nèi)容提交給 服務(wù)器

當(dāng)發(fā)表評(píng)論OK后，重新刷新列表，以查看最新的評(píng)論

• 如果調(diào)用 getComments 方法重新刷新評(píng)論列表的話，可能只能得到 最后一頁(yè)的評(píng)論，前幾頁(yè)的評(píng)論獲取不到
• 換一種思路： 當(dāng)評(píng)論成功后，在客戶端，手動(dòng)拼接出一個(gè) 最新的評(píng)論對(duì)象，然后 調(diào)用 數(shù)組的 unshift 方法， 把最新的評(píng)論，追加到 data 中 comments 的開頭；這樣，就能 完美實(shí)現(xiàn)刷新評(píng)論列表的需求；

postComment() {// 校驗(yàn)是否為空內(nèi)容 trim() 方法去除字符串的頭尾空格:if (this.msg.trim().length === 0) {return Toast("評(píng)論內(nèi)容不能為空！");}// 發(fā)表評(píng)論// 參數(shù)1： 請(qǐng)求的URL地址// 參數(shù)2： 提交給服務(wù)器的數(shù)據(jù)對(duì)象 { content: this.msg }// 參數(shù)3： 定義提交時(shí)候，表單中數(shù)據(jù)的格式 { emulateJSON:true }this.$http.post("api/postcomment/" + this.$route.params.id, {content: this.msg.trim()}).then(function(result) {if (result.body.status === 0) {// 1. 拼接出一個(gè)評(píng)論對(duì)象var cmt = {user_name: "匿名用戶",add_time: Date.now(),content: this.msg.trim()};this.comments.unshift(cmt);this.msg = "";}});}}

改造圖片分析 按鈕為 路由的鏈接并顯示對(duì)應(yīng)的組件頁(yè)面

<router-link to="/home/photolist"> <img src="../../images/menu2.png" alt=""> <div class="mui-media-body">圖片分享</div> </router-link>

import PhotoInfo from './components/photos/PhotoInfo.vue'
{ path: '/home/photoinfo/:id', component: PhotoInfo }

繪制 圖片列表 組件頁(yè)面結(jié)構(gòu)并美化樣式

制作 頂部的滑動(dòng)條

制作 底部的圖片列表

制作頂部滑動(dòng)條

需要借助于 MUI 中的 tab-top-webview-main.html

由于滑動(dòng)條在最頂部全屏展示，需要把 slider 區(qū)域的 mui-fullscreen類 去掉

滑動(dòng)條無(wú)法正常觸發(fā)滑動(dòng)，通過(guò)檢查官方文檔，發(fā)現(xiàn)這是JS組件，需要被初始化一下

• 先導(dǎo)入 mui 的JS文件:

import mui from '../../../lib/mui/js/mui.min.js'

• 在 組件的 mounted 事件鉤子中，注冊(cè) mui 的滾動(dòng)事件：

mounted() {// 當(dāng) 組件中的DOM結(jié)構(gòu)被渲染好并放到頁(yè)面中后，會(huì)執(zhí)行這個(gè) 鉤子函數(shù)// 如果要操作元素了，最好在 mounted 里面，因?yàn)?#xff0c;這里時(shí)候的 DOM 元素 是最新的// 2. 初始化滑動(dòng)控件mui(".mui-scroll-wrapper").scroll({deceleration: 0.0005 //flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值0.0006});}

我們?cè)诔跏蓟?滑動(dòng)條 的時(shí)候，導(dǎo)入的 mui.js ，但是，控制臺(tái)報(bào)錯(cuò)： Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
解決方案：
cnpm install babel-plugin-transform-remove-strict-mode -D
在 .babelrc中 "plugins":["transform-remove-strict-mode"]

當(dāng) 滑動(dòng)條 調(diào)試OK后，發(fā)現(xiàn)， tabbar 無(wú)法正常工作了。App.vue 中的 router-link 身上的類名 mui-tab-item 存在兼容性問(wèn)題，導(dǎo)致tab欄失效，可以把mui-tab-item改名為mui-tab-item1，并復(fù)制相關(guān)的類樣式，來(lái)解決這個(gè)問(wèn)題；

.mui-bar-tab .mui-tab-item1.mui-active {color: #007aff;}.mui-bar-tab .mui-tab-item1 {display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: #929292;}.mui-bar-tab .mui-tab-item1 .mui-icon {top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}

滑動(dòng)的時(shí)候報(bào)警告：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解決方法，可以加上* { touch-action: pan-y; } 這句樣式去掉。

獲取所有分類，并渲染 分類列表；

<!-- :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" 綁定樣式，并集類，第二個(gè)類是表達(dá)式來(lái)判斷 --> <!-- MUI同時(shí)也封裝好了，滑動(dòng)欄點(diǎn)擊另外一個(gè)就會(huì)高亮顯示 --> <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">{{ item.title }} </a>

制作圖片列表區(qū)域

圖片列表需要使用懶加載技術(shù)，我們可以使用 Mint-UI 提供的現(xiàn)成的 組件 lazy-load
需要全局引入
import MintUI from ‘mint-ui’
Vue.use(MintUI)
import ‘mint-ui/lib/style.css’

根據(jù)lazy-load的使用文檔，嘗試使用

渲染圖片列表數(shù)據(jù)

<a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">

實(shí)現(xiàn)了 圖片列表的 懶加載改造和 樣式美化

z-index: 99 //z-index 屬性設(shè)置元素的堆疊順序。z-index的值越大，就越靠上
//實(shí)際的圖片
img {
width: 100%; //占滿全屏
vertical-align: middle;//垂直對(duì)齊方式。
}

實(shí)現(xiàn)了 點(diǎn)擊圖片 跳轉(zhuǎn)到 圖片詳情頁(yè)面

在改造 li 成 router-link 的時(shí)候，默認(rèn)是a標(biāo)簽，需要使用 tag 屬性指定要渲染為 哪種元素
冒號(hào) : 是綁定元素，后面是表達(dá)式
<router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
import PhotoInfo from './components/photos/PhotoInfo.vue'
{ path: '/home/photoinfo/:id', component: PhotoInfo },

實(shí)現(xiàn) 詳情頁(yè)面的布局和美化，同時(shí)獲取數(shù)據(jù)渲染頁(yè)面

引入子組件
// 1. 導(dǎo)入評(píng)論子組件
import comment from "../subcomponents/comment.vue";
// 2. 注冊(cè) 評(píng)論子組件

components: {"cmt-box": comment}

// 3.放置一個(gè)現(xiàn)成的 評(píng)論子組件
<cmt-box :id="id"></cmt-box>
//4. 所用的組件里傳值
props: ["id"]

實(shí)現(xiàn) 圖片詳情中 縮略圖的功能

vue-preview看此文檔使用 https://github.com/LS1231/vue-preview
一個(gè)Vue集成PhotoSwipe圖片預(yù)覽插件，使用 vue-preview 這個(gè)縮略圖插件
獲取到所有的圖片列表，然后使用 v-for 指令渲染數(shù)據(jù)
注意： img標(biāo)簽上的class不能去掉
注意： 每個(gè) 圖片數(shù)據(jù)對(duì)象中，必須有 w 和 h 屬性

npm i vue-preview -S

import VuePreview from ‘vue-preview’
Vue.use(VuePreview)

<div class="thumbs"><img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> //添加內(nèi)容：Key需要綁定一下，其他代碼都是拷貝過(guò)來(lái)的</div>放在div為 thumbs中可以添加額外的樣式如：.thumbs{img{margin: 10px;box-shadow: 0 0 8px #999;}}getThumbs() {// 獲取縮略圖this.$http.get("api/getthumimages/" + this.id).then(result => {if (result.body.status === 0) {// 循環(huán)每個(gè)圖片數(shù)據(jù)，可以加上額外的屬性，補(bǔ)全圖片的寬和高result.body.message.forEach(item => {item.w = 600;item.h = 400;});// 把完整的數(shù)據(jù)保存到 list 中this.list = result.body.message;}});}

總結(jié)

以上是生活随笔為你收集整理的Vue商城项目03的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。