Vue shopCart 組件開發(fā)詳解
一、shopCart組件
(1) goods 父組件和 子組件 shopCart 傳參
deliveryPrice:{ // 單價(jià) 從json seller 對象數(shù)據(jù)中獲取
type:Number,
default:0
},
minPrice:{ // 最低起送價(jià) 從json seller 對象數(shù)據(jù)中獲取
type:Number,
default:20
}
其中 deliveryPrice 和 minPrice 的數(shù)據(jù)都是從 data.json數(shù)據(jù) 中 seller 對象下 獲得。所以在goods 組件中還要 獲取到 seller對象 的數(shù)據(jù)，否則會報(bào)錯(cuò)：
[Vue warn]: Error in render: "TypeError: Cannot read property 'deliveryPrice' of undefined"
解決方法：根組件 App.vue 中 router-view 組件獲取seller 數(shù)據(jù)，傳到 goods 組件中
1-1.app.vue (根組件 也是 goods 的父組件)
<keep-alive> <router-view :sell="sellerObj"></router-view> </keep-alive>
注意：sellerObj 是data 定義 的 對象里用來接收 data.json 數(shù)據(jù)，相當(dāng)于 實(shí)參
1-2.goods.vue (相對于跟組件的子組件 且 shopCart 的父組件)
通過props 屬性 進(jìn)行組件之間的通信
props: {
sell: Object // 相當(dāng)于 形參
},
1-3.shopCart.vue ( goods 的子組件)
<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>
(2) 選中商品 的 計(jì)算功能
1-1. 傳入用戶選中商品的集合
說明：從父組件會 傳入一個(gè)用戶選中商品的 數(shù)組，數(shù)組里會存放著 n 個(gè)對象，每個(gè)對象里存放著該 商品的 價(jià)格 和 數(shù)量。
props:{ // 通過父組件傳過來的 ( 相當(dāng)于形參 )
selefoodsArr:{ // 用戶選中的商品存放在一個(gè)數(shù)組里 接收的是 data.json數(shù)據(jù)的 goods（數(shù)組）
type:Array, // 當(dāng)父組件傳過來的 類型是對象或者 是數(shù)組時(shí)， default 就是一個(gè)函數(shù)
default (){
return [] // 返回?cái)?shù)組 存放著選中 商品 對應(yīng)的 goods下的 foods 數(shù)組（由 父組件 的 實(shí)參 決定的返回值）
}
}
1-2. 利用計(jì)算屬性 選中商品數(shù)量的變化，商品總價(jià)，動(dòng)態(tài)改變描述等功能
computed:{
totalPrice (){ //計(jì)算總價(jià)，超過起送額度后提示可付款
let total=0 // 定義一個(gè)返回值
this.selefoodsArr.forEach((rfoods) =>{ // 遍歷 這個(gè) goods 數(shù)組 取到 價(jià)格 和 數(shù)量 （當(dāng)然在這里數(shù)據(jù)庫沒有count 這個(gè)屬性，稍后 我們會利用 vue.set() 新建一個(gè)count 屬性）
total += rfoods.price * rfoods.count // 形參 rfoods 實(shí)參 是 foods
});
return total;
},
totalCount (){ // //計(jì)算選中的food數(shù)量，在購物車圖標(biāo)處顯示，采用絕對定位，top：0；right：0；顯示在購物車圖標(biāo)右上角
let count=0
this.selefoodsArr.forEach((rfoods) =>{ // 形參 rfoods 實(shí)參 是 foods
count += rfoods.count
});
return count;
},
payDesc (){ //控制底部右邊內(nèi)容隨food的變化而變化，payDesc()控制顯示內(nèi)容，enough 添加類調(diào)整顯示樣式
let diff = this.minPrice - this.totalPrice
if (!this.totalPrice) {
return `￥${this.minPrice}起送`
} else if (diff > 0) {
return `還差￥${diff}元`
} else {
return '去結(jié)算'
}
}
}
這樣就渲染到 template 里了
<div class="shopCart">
<div class="content">
<div class="content-left">
<div class="logo-wrapper">
<!--徽章 展示選中商品的個(gè)數(shù)-->
<div class="badge" v-show="totalCount">
{{totalCount}}
</div>
<!--購物車 圖標(biāo) 選擇商品和未選擇商品 時(shí) 動(dòng)態(tài)改變 樣式 條件：只要選擇了商品即總價(jià)不為0 ，樣式變-->
<div class="logo" :class="{'active':totalCount}">
<i class="icon-shopping_cart"></i>
</div>
</div>
<!--同理： 總價(jià) 不為0 字體高亮-->
<div class="price" :class="{'active':totalPrice}">
￥{{totalPrice}}
</div>
<!--配送費(fèi) data.json 提供-->
<div class="desc">
另需要配送費(fèi)￥{{deliveryPrice}}元
</div>
</div>
<!--根據(jù)條件 動(dòng)態(tài) 改變樣式-->
<div class="content-right" :class="{'enough':totalPrice>=minPrice}">
{{payDesc}}
</div>
</div>
</div>
相關(guān)樣式
&.active color white &.enough background #00b43c color white
總結(jié)：通過以上學(xué)習(xí)我們能發(fā)現(xiàn)，selectFoods()的變化起著關(guān)鍵作用，它的變化會引起DOM的變化，并最終體現(xiàn)到界面上，而我們不用關(guān)注DOM內(nèi)部的具體實(shí)現(xiàn)，這就是vue的一大好處。如果采用jQuery完成這些功能會略顯繁雜。
二、cartControl 組件
說明：這個(gè)組件是控制購物車小球的。其中涉及到小球的動(dòng)畫
(1) 新增屬性 count
說明：
在goods 下的 foods 添加一個(gè)屬性 count,用來存儲用戶選中的商品個(gè)數(shù),計(jì)算商品總價(jià) 以及 關(guān)聯(lián)徽章（顯示用戶選擇商品的個(gè)數(shù)）的變化
方法：通過import Vue from 'vue';使用set接口，通過vue.set()添加屬性，當(dāng)它變化時(shí)就能被檢測到，從而父組件能獲取到count值（遍歷選中的商品時(shí)使用）
methods:{
addCart(event){ // 點(diǎn)擊count 加，
//console.log(event.target);
if (!event._constructed) { // 去掉自帶click事件的點(diǎn)擊
return;
}
if(!this.foodsele.count){
Vue.set(this.foodsele, 'count', 1)
}else{
this.foodsele.count++
}
},
decreaseCart (event){ // 點(diǎn)擊減少
if (!event._constructed) { // 去掉自帶click事件的點(diǎn)擊
return;
}
if(this.foodsele.count){
this.foodsele.count --
}
}
}
(2)添加按鈕 實(shí)現(xiàn)transtion 過渡
我們要實(shí)現(xiàn)的效果是：當(dāng)點(diǎn)擊添加按鈕時(shí)，減少按鈕出現(xiàn) 并伴隨著 旋轉(zhuǎn)、平移以及透明度變化的 一些 動(dòng)畫效果
<transition name='move'> <!--平移動(dòng)畫--> <div class="cart-decrease" v-show="foodsele.count" @click='decreaseCart($event)'> <span class="icon-remove_circle_outline inner"></span><!--旋轉(zhuǎn)、透明度動(dòng)畫--> </div> </transition>
.cart-decrease
display inline-block
padding 6px
transition: all .4s linear /*過渡效果的 CSS 屬性的名稱、過渡效果需要多少時(shí)間、速度效果的速度曲線*/
.inner
line-height 24px
font-size 24px
color rgb(0,160,220)
transition all 0.4s linear
&.move-enter-active, &.move-leave-active
transform translate3d(0,0,0) /* 這樣可以開啟硬件加速，動(dòng)畫更流暢，3D旋轉(zhuǎn)，X軸位移24px */
.inner
display inline-block /* 設(shè)置成inline-block才有高度，才能有動(dòng)畫 */
transform rotate(0)
&.move-enter, &.move-leave-active
opacity: 0
transform translate3d(24px,0,0)
.inner
transform rotate(180deg)
三、拋物線小球動(dòng)畫
通過兩個(gè)層來控制小球，外層控制一個(gè)方向的變化，內(nèi)層控制另外一個(gè)方向的變化（寫兩層才會有拋物線的效果），采用fixed布局（是相對于視口的動(dòng)畫）
事件發(fā)射和接收
擴(kuò)展
Vue1.0組件間傳遞
- 使用$on()監(jiān)聽事件；
- 使用$emit()在它上面觸發(fā)事件；
- 使用$dispatch()派發(fā)事件，事件沿著父鏈冒泡；
- 使用$broadcast()廣播事件，事件向下傳導(dǎo)給所有的后代
(1) Vue2.0 組件之間傳遞數(shù)據(jù)
1-1. 當(dāng)點(diǎn)擊 添加數(shù)量時(shí) 在 cartControl 組件里的 addCount 方法里 通過 $emit 屬性 派發(fā)一個(gè)事件 , 傳入點(diǎn)擊的對象
addCart(event){ // 點(diǎn)擊count 加，
// console.log(event.target);
if (!event._constructed) { // 去掉自帶click事件的點(diǎn)擊
return;
}
if(!this.foodsele.count){
Vue.set(this.foodsele, 'count', 1)
}else{
this.foodsele.count++
}
// 當(dāng)點(diǎn)擊 添加數(shù)量時(shí) 通過 $emit 屬性 提交一個(gè)名為 add 給父組件
// 子組件通過 $emit觸發(fā) add事件 ，將參數(shù)傳遞給父組件
this.$emit('add', event.target);
}
1-2. 操作 goods 組件
購物車組件如果提交了addCart事件就調(diào)用add函數(shù)
<cart-control :foodsele='food' @add="addFood"></cart-control>
父組件使用 @add="addFood"監(jiān)聽由子組件vm.$emit觸發(fā)的事件，通過addFood()接受從子組件傳遞過來的數(shù)據(jù)，通知父組件數(shù)據(jù)改變了。
addFood(target) {
this._drop(target);
}
1-3. 父組件訪問子組件 vue 提供了接口 ref
<shopCart ref="shopCart" :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice" :selefoods-arr='selectfoods' ></shopCart>
_drop(target) {
// 體驗(yàn)優(yōu)化,異步執(zhí)行下落動(dòng)畫
this.$nextTick(() => {
this.$refs.shopCart.balldrop(target);// 將target傳入shopCart子組件中的balldrop方法，所以drop方法能獲得用戶點(diǎn)擊按鈕的元素，即能獲取點(diǎn)擊按鈕的位置
});
}
區(qū)別 訪問DOM 變量
1-3. 操作 shopCart 組件
data (){ // 定義一個(gè)數(shù)組 來 控制小球的狀態(tài) 定義多個(gè)對象，表示頁面中做多同時(shí)運(yùn)動(dòng)的小球
return{ // 定義 5 個(gè) 小球
balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
dropBalls:[] // 接收下落小球
}
}
methods:{
balldrop(ele) {
// console.log(el) 取到點(diǎn)擊 對象
for(var i=0;i<this.balls.length;i++){
let ball=this.balls[i]
if(!ball.show){
ball.show=true
ball.ele=ele
this.dropBalls.push(ball)
return;
}
}
}
}
動(dòng)畫過程開始，利用vue 提供的鉤子函數(shù)
beforeEnter (el){ //找到所以設(shè)為true的小球
let count=this.balls.length
while(count--){
let ball = this.balls[count];
if(ball.show){
let pos=ball.el.getBoundingClientRect() //返回元素相對于視口偏移的位置
let x=pos.left-32 // 點(diǎn)擊的按鈕與小球（fixed）之間x方向的差值
let y=-(window.innerHeight-pos.top-22)
el.style.display = ''; //設(shè)置初始位置前，手動(dòng)置空，覆蓋之前的display：none，使其顯示
el.style.webkitTransform = `translate3d(0,${y}px,0)`; //外層元素做縱向的動(dòng)畫，y是變量
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner_hook')[0];//內(nèi)層元素做橫向動(dòng)畫,inner-hook（用于js選擇的樣式名加上-hook，表明只是用 //于js選擇的，沒有真實(shí)的樣式含義）
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
enter(el) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {//異步執(zhí)行
el.style.webkitTransform = 'translate3d(0,0,0)'; //重置回來
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner_hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
});
},
afterEnter(el) {
let ball = this.dropBalls.shift(); //取到做完動(dòng)畫的球，再置為false，即重置，它還可以接著被利用
if (ball) {
ball.show = false;
el.style.display = 'none';
}
}
<div class="ball-container">
<div v-for="ball in balls">
<transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="ball.show">
<div class="inner inner_hook"></div>
</div>
</transition>
</div>
</div>
&.drop-enter,&.drop-enter-active
transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)
.inner
width 16px
height 16px
border-radius 50%
background rgb(0,160,220)
transition all 0.4s linear
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue-star評星組件開發(fā)實(shí)例
- Vue header組件開發(fā)詳解
- Vue框架之goods組件開發(fā)詳解
- Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能
- vue webuploader 文件上傳組件開發(fā)
- Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
- vue.js學(xué)習(xí)之UI組件開發(fā)教程
- Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
- Vue組件開發(fā)初探
- Vue 短信驗(yàn)證碼組件開發(fā)詳解
- 深入淺析Vue組件開發(fā)
- vue多級多選菜單組件開發(fā)
- vue.js表格組件開發(fā)的實(shí)例詳解
- Vue組件開發(fā)技巧總結(jié)
相關(guān)文章
vue 使用element-ui中的Notification自定義按鈕并實(shí)現(xiàn)關(guān)閉功能及如何處理多個(gè)通知
這篇文章主要介紹了vue 使用element-ui中的Notification自定義按鈕并實(shí)現(xiàn)關(guān)閉功能及如何處理多個(gè)通知，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue插槽slot詳細(xì)介紹(對比版本變化,避免踩坑)
Vue中的Slot對于編寫可復(fù)用可擴(kuò)展的組件是再合適不過了,下面這篇文章主要給大家介紹了關(guān)于Vue插槽slot詳細(xì)介紹的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在Flask項(xiàng)目中集成并訪問Vue前端項(xiàng)目的流程步驟
在現(xiàn)代?Web?開發(fā)中,前后端分離的架構(gòu)模式越來越流行,前端通常使用?Vue、React?等框架開發(fā),而后端則使用?Flask、Django?等框架提供?API?服務(wù),本文將詳細(xì)介紹如何在一個(gè)?Flask?項(xiàng)目中集成?Vue?前端項(xiàng)目,并確保能夠正確訪問和運(yùn)行,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了解決vue打包后vendor.js文件過大問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue項(xiàng)目的表單校驗(yàn)實(shí)戰(zhàn)指南
這篇文章主要介紹了Vue項(xiàng)目表單校驗(yàn)的相關(guān)資料,前端表單校驗(yàn)?zāi)軠p少無效請求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗(yàn),需要準(zhǔn)備表單對象、規(guī)則對象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10
解決vue2中使用axios http請求出現(xiàn)的問題
下面小編就為大家分享一篇解決vue2中使用axios http請求出現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)后臺管理頁面步驟
本文從整體上介紹Vue框架的開發(fā)流程，結(jié)合具體的案例，使用Vue框架調(diào)用具體的后端接口，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實(shí)例代碼講解的非常詳細(xì) ,需要的朋友可以參考下2019-04-04
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。2023-04-04