Vue shopCart 컴포넌트 개발 예시에 대한 자세한 설명
- 小云云원래의
- 2018-01-31 10:10:321511검색
이 글은 주로 Vue shopCart 컴포넌트 개발에 대한 자세한 설명을 소개하는 글입니다. 에디터가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. shopCart 구성 요소
(1) 상품 상위 구성 요소 및 하위 구성 요소 shopCart 전달 매개 변수
deliveryPrice:{ // 单价 从json seller 对象数据中获取
type:Number,
default:0
},
minPrice:{ // 最低起送价 从json seller 对象数据中获取
type:Number,
default:20
}deliveryPrice 및 minPrice 데이터는 data.json 데이터의 판매자 개체에서 가져옵니다. 따라서 판매자 객체의 데이터는 상품 구성 요소에서 얻어야 합니다. 그렇지 않으면 오류가 보고됩니다:
[Vue 경고]: 렌더링 오류: "TypeError: 정의되지 않은 'deliveryPrice' 속성을 읽을 수 없습니다."
해결 방법: 루트 구성 요소 App.vue의 라우터 보기 구성 요소는 판매자 데이터를 획득하여 이를 상품 구성 요소
1-1.app.vue에 전달합니다(루트 구성 요소는 상품의 상위 구성 요소이기도 함)
<keep-alive> <router-view :sell="sellerObj"></router-view> </keep-alive>
참고: SellerObj는 실제 매개변수인
1-2.goods.vue와 동일한 data.json 데이터를 수신하는 데 사용되는 data로 정의된 개체입니다(구성 요소의 하위 구성 요소 및 shopCart의 상위 구성 요소와 관련됨)
props 속성을 통한 컴포넌트 간의 통신
props: {
sell: Object // 相当于 形参
},1-3.shopCart.vue (상품의 하위 컴포넌트)
<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>
(2) 선택한 상품의 계산 기능
1-1. products selected by the user
지침: 상위 구성 요소에서 사용자가 선택한 제품 배열을 전달합니다. n개의 개체가 배열에 저장되고 각 개체는 제품의 가격과 수량을 저장합니다.
props:{ // 通过父组件传过来的 ( 相当于形参 )
selefoodsArr:{ // 用户选中的商品存放在一个数组里 接收的是 data.json数据的 goods（数组）
type:Array, // 当父组件传过来的 类型是对象或者 是数组时， default 就是一个函数
default (){
return [] // 返回数组 存放着选中 商品 对应的 goods下的 foods 数组（由 父组件 的 实参 决定的返回值）
}
}1-2. 계산된 속성을 사용하여 제품 수량, 총 제품 가격 변경, 설명 및 기타 기능을 동적으로 변경합니다.
computed:{
totalPrice (){ //计算总价，超过起送额度后提示可付款
let total=0 // 定义一个返回值
this.selefoodsArr.forEach((rfoods) =>{ // 遍历 这个 goods 数组 取到 价格 和 数量 （当然在这里数据库没有count 这个属性，稍后 我们会利用 vue.set() 新建一个count 属性）
total += rfoods.price * rfoods.count // 形参 rfoods 实参 是 foods
});
return total;
},
totalCount (){ // //计算选中的food数量，在购物车图标处显示，采用绝对定位，top：0；right：0；显示在购物车图标右上角
let count=0
this.selefoodsArr.forEach((rfoods) =>{ // 形参 rfoods 实参 是 foods
count += rfoods.count
});
return count;
},
payDesc (){ //控制底部右边内容随food的变化而变化，payDesc()控制显示内容，enough 添加类调整显示样式
let diff = this.minPrice - this.totalPrice
if (!this.totalPrice) {
return `￥${this.minPrice}起送`
} else if (diff > 0) {
return `还差￥${diff}元`
} else {
return '去结算'
}
}
}관련 스타일
<p class="shopCart">
<p class="content">
<p class="content-left">
<p class="logo-wrapper">
<!--徽章 展示选中商品的个数-->
<p class="badge" v-show="totalCount">
{{totalCount}}
</p>
<!--购物车 图标 选择商品和未选择商品 时 动态改变 样式 条件：只要选择了商品即总价不为0 ，样式变-->
<p class="logo" :class="{'active':totalCount}">
<i class="icon-shopping_cart"></i>
</p>
</p>
<!--同理： 总价 不为0 字体高亮-->
<p class="price" :class="{'active':totalPrice}">
￥{{totalPrice}}
</p>
<!--配送费 data.json 提供-->
<p class="desc">
另需要配送费￥{{deliveryPrice}}元
</p>
</p>
<!--根据条件 动态 改变样式-->
<p class="content-right" :class="{'enough':totalPrice>=minPrice}">
{{payDesc}}
</p>
</p>
</p>요약: 위 학습을 통해 selectFoods()의 변경 사항이 DOM에 변경을 일으키고 결국 인터페이스에 반영된다는 것을 알 수 있습니다. DOM 내부의 특정 구현에 주의를 기울일 필요가 없습니다. 이는 vue의 큰 이점 중 하나입니다. 이러한 기능을 완성하기 위해 jQuery를 사용하는 것은 약간 복잡합니다. 설명: 장바구니 볼을 제어하는 컴포넌트입니다. 공의 애니메이션이 포함됩니다
사용자가 선택한 제품 수를 저장하는 데 사용되는 상품 아래의 식품에 속성 개수를 추가하고 해당 상품의 총 가격을 계산합니다. 제품 및 관련 배지( 사용자가 선택한 제품 수의 변경 사항 표시
방법: 'vue'에서 Vue를 가져오고, 설정된 인터페이스를 사용하고 vue.set()을 통해 속성을 추가합니다. 변경되면 상위 구성 요소가 카운트 값을 얻을 수 있도록 감지되었습니다(선택한 제품을 순회할 때 사용됨)&.active color white &.enough background #00b43c color white
(2) 전환을 구현하기 위해 버튼을 추가합니다
우리가 달성하려는 효과는 다음과 같습니다. 클릭하면 축소 버튼이 나타나고 회전, 번역 및 투명도 변경의 일부 애니메이션 효과가 동반됩니다. 한 방향의 변경을 제어하고 내부 레이어가 다른 방향을 제어합니다. 변경(포물선 효과를 갖도록 두 개의 레이어 작성), 고정 레이아웃 사용(뷰포트를 기준으로 한 애니메이션)
이벤트 방출 및 수신
구성 요소 간에 전달되는 값 -1
Extension
Vue1.0 구성 요소 전송
$emit()을 사용하여 이벤트를 트리거합니다. ; $dispatch()를 사용하여 이벤트를 전달하고, 이벤트는 상위 체인을 따라 버블링됩니다. 는 $broadcast()를 사용하여 이벤트를 브로드캐스팅하고, 이벤트는 모든 하위 항목으로 전파됩니다.
( 1) Vue2.0 구성 요소 간 데이터 전송1-1 수량을 추가하려면 cartControl 구성 요소의 addCount 메서드에 있는 $emit 속성을 통해 이벤트를 전달하고 클릭한 개체를 전달합니다
-
methods:{ addCart(event){ // 点击count 加， //console.log(event.target); if (!event._constructed) { // 去掉自带click事件的点击 return; } if(!this.foodsele.count){ Vue.set(this.foodsele, 'count', 1) }else{ this.foodsele.count++ } }, decreaseCart (event){ // 点击减少 if (!event._constructed) { // 去掉自带click事件的点击 return; } if(this.foodsele.count){ this.foodsele.count -- } } }1-2. 상품 컴포넌트를 작동합니다 장바구니 컴포넌트가 addCart 이벤트를 제출하는 경우 추가 기능을 호출합니다.
-
<transition name='move'> <!--平移动画--> <p class="cart-decrease" v-show="foodsele.count" @click='decreaseCart($event)'> <span class="icon-remove_circle_outline inner"></span><!--旋转、透明度动画--> </p> </transition>
상위 컴포넌트는 @add="addFood"를 사용하여 하위 컴포넌트에 의해 트리거되는 이벤트를 수신합니다. vm.$emit는 addFood()를 통해 하위 구성 요소에서 전달된 데이터를 수락하고 데이터 변경 사항을 상위 구성 요소에 알립니다. -
.cart-decrease display inline-block padding 6px transition: all .4s linear /*过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线*/ .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) /* 这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px */ .inner display inline-block /* 设置成inline-block才有高度，才能有动画 */ transform rotate(0) &.move-enter, &.move-leave-active opacity: 0 transform translate3d(24px,0,0) .inner transform rotate(180deg)1-3. 상위 구성 요소는 하위 구성 요소에 액세스합니다. vue는 인터페이스 ref를 제공합니다
코드는 다음과 같습니다.
addCart(event){ // 点击count 加，
// console.log(event.target);
if (!event._constructed) { // 去掉自带click事件的点击
return;
}
if(!this.foodsele.count){
Vue.set(this.foodsele, 'count', 1)
}else{
this.foodsele.count++
}
// 当点击 添加数量时 通过 $emit 属性 提交一个名为 add 给父组件
// 子组件通过 $emit触发 add事件 ，将参数传递给父组件
this.$emit('add', event.target);
}
<cart-control :foodsele='food' @add="addFood"></cart-control>vue
addFood(target) {
this._drop(target);
}에서 제공하는 후크 기능을 사용하여 애니메이션 프로세스가 시작됩니다. _drop(target) {
// 体验优化,异步执行下落动画
this.$nextTick(() => {
this.$refs.shopCart.balldrop(target);// 将target传入shopCart子组件中的balldrop方法，所以drop方法能获得用户点击按钮的元素，即能获取点击按钮的位置
});
}
data (){ // 定义一个数组 来 控制小球的状态 定义多个对象，表示页面中做多同时运动的小球
return{ // 定义 5 个 小球
balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
dropBalls:[] // 接收下落小球
}
}관련 추천:
vuejs는 재귀 구성 요소를 사용하여 트리 디렉터리를 구현합니다.
위 내용은 Vue shopCart 컴포넌트 개발 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!