餓了麼專案---13、模組化程式設計，實現商品詳情頁面

阿新 • • 發佈：2019-01-08

import BScroll from 'better-scroll'; import cartcontrol from '../cartcontrol/cartcontrol.vue'; import ratingSelecte from '../ratingSelecte/ratingSelecte.vue'; import {dateToString} from '../../common/js/common.js'; //商品評價的篩選狀態 const SATISFY=0; //推薦 const UNSATISFY=1; //吐槽 const All=2; //全部 export default{ name:'food'

, props:{ selectedfood:{ type:Object } }, data(){ return{ showthis:false,//顯示或隱藏改元件 suggestion:{ all:'全部', satisfy:'推薦', unsatisfy:'吐槽'

}, selectType:All, onlyContent:false//只看內容 } }, methods:{ showthisfood(){ this.showthis = true; //初始化篩選內容 this.selectType=All, this.onlyContent=false//只看內容

this.$nextTick(()=>{ //better scroll需要更新DOM物件 if(!this.scroll){ this.scroll = new BScroll(this.$refs.food, { click:true }); }else{ this.scroll.refresh(); } }) }, hidethisfood(){ this.showthis = false; }, cartAddcontrol(el){ this.$emit('cartAddEvent',el); }, addCount(el){ //為food數量置1 this.$set(this.selectedfood,'count',1) //派發小球點選事件，做拋物動畫 this.$emit('cartAddEvent',el.target); }, //切換評價篩選條件 selectContent(type){ this.selectType = type //切換篩選條件時，更新了DOM節點，要更新better scroll this.$nextTick(()=>{ this.scroll.refresh() }) }, onlyshowcon(){ this.onlyContent = !this.onlyContent this.$nextTick(()=>{ this.scroll.refresh() }) }, //是否顯示評價資訊 showRating(rating){ //只看評價時，不顯示的 if(this.onlyContent && rating.text==''){ return false; } //點選三個評價篩選 if(this.selectType===All){ return true; }else{ return this.selectType ===rating.rateType; } } }, components:{cartcontrol,ratingSelecte} , filters:{ //將字串時間轉換成時間格式 dateString(datenumber) { let date = new Date(datenumber); return dateToString(date); } } }

餓了麼專案---13、模組化程式設計，實現商品詳情頁面

餓了麼專案---13、模組化程式設計，實現商品詳情頁面

餓了麼專案---6、使用Props傳遞資料

餓了麼專案---12、父子元件、兄弟元件之間資料通訊與事件派發（關於購物車新增按鈕的動畫）

餓了麼專案---4、移動端檢視專案及border 1畫素問題

餓了麼專案---11、新增商品到購物車的聯動功能（1）

餓了麼專案---7、ref屬性註冊節點資訊，並獲取DOM節點（1）

餓了麼專案---10、（1）css3過渡、變換及3d變換、動畫

餓了麼專案開始---css3的flex佈局，開發移動端介面

Vue2.x實戰餓了麼專案筆記（一）

vue餓了麼專案實現評論列表的篩選

餓了麼專案（三）

Vue高仿餓了麼專案（2）—mock資料

Vue2.0實現高仿餓了麼專案裡的小球飛入動畫

前端採用SeaJs模組化程式設計，處理web專案版本迭代每次都清空瀏覽器快取問題

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（二）【重點突破】—— 當better-scroll 遇見Vue

Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（二）

Java面試題-阿里、餓了麼、鏈家、攜程

餓了麼專案---13、模組化程式設計，實現商品詳情頁面

相關推薦