> 웹 프론트엔드 > JS 튜토리얼 > Vue의 shopCart 컴포넌트를 사용하는 방법

Vue의 shopCart 컴포넌트를 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-03-23 10:46:27
원래의
2031명이 탐색했습니다.

이번에는 Vue의 shopCart 컴포넌트 사용 방법을 가져오겠습니다. 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 데이터에서 데이터를 수신하는 데 사용됩니다(구성 요소의 하위 구성 요소 및 shopCart의 상위 구성 요소에 상대적)

간의 통신 소품 속성을 통한 구성요소

props: {
  sell: Object // 相当于 形参
 },
로그인 후 복사
1-3. shopCart.vue (상품의 하위 구성요소)

<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>
로그인 후 복사
(2) 선택한 상품의 계산 기능

1-1. 사용자가 선택한 상품 컬렉션을 전달합니다

설명: 사용자가 선택한 상품 배열은 상위 구성 요소에서 전달되며 배열에는 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="{&#39;active&#39;:totalCount}">
   <i class="icon-shopping_cart"></i>
  </p>
 </p>
 <!--同理: 总价 不为0 字体高亮-->
 <p class="price" :class="{&#39;active&#39;:totalPrice}">
  ¥{{totalPrice}}
 </p>
 <!--配送费 data.json 提供-->
 <p class="desc">
  另需要配送费¥{{deliveryPrice}}元
 </p>
  </p>
  <!--根据条件  动态 改变样式-->
  <p class="content-right" :class="{&#39;enough&#39;:totalPrice>=minPrice}">  
 {{payDesc}}  
 </p>
 </p>
</p>
로그인 후 복사
관련 스타일

&.active
  color white
  
&.enough
  background #00b43c
  color white
로그인 후 복사
요약: 위의 학습을 통해 우리는 selectFoods()의 변경 사항이 DOM에 변경을 일으키고 결국 인터페이스에 반영된다는 것을 알 수 있습니다. 이것은 vue의 주요 이점입니다. 이러한 기능을 완성하기 위해 jQuery를 사용하는 것은 약간 복잡합니다.

2. CartControl 컴포넌트

설명: 장바구니 볼을 제어하는 ​​컴포넌트입니다. 공의 애니메이션이 포함됩니다

(1) 속성 개수 추가

지침:

사용자가 선택한 제품 수를 저장하는 데 사용되는 상품 아래의 식품에 속성 개수를 추가하고 해당 상품의 총 가격을 계산합니다. 제품 및 관련 배지( 사용자가 선택한 제품 수의 변경 사항 표시

방법: 'vue'에서 Vue를 가져오고, 설정된 인터페이스를 사용하고 vue.set()을 통해 속성을 추가합니다. 변경되면 상위 구성 요소가 카운트 값을 얻을 수 있도록 감지되었습니다(선택한 제품을 순회할 때 사용됨)

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 --
  } 
  }
}
로그인 후 복사
(2) 전환을 구현하기 위한 버튼 추가

우리가 달성하려는 효과는 다음과 같습니다. 추가 버튼을 클릭할 때, 버튼이 나타나고 회전, 이동 및 투명도 변경이 수반됩니다. 일부 애니메이션 효과

<transition name=&#39;move&#39;> <!--平移动画-->  
 <p class="cart-decrease" v-show="foodsele.count" @click=&#39;decreaseCart($event)&#39;>
  <span class="icon-remove_circle_outline inner"></span><!--旋转、透明度动画--> 
  </p>
</transition>
로그인 후 복사
 .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)
로그인 후 복사

3. 포물선 공 애니메이션

은 두 개의 레이어를 통해 공을 제어하고 내부 레이어는 한 방향으로의 변경을 제어합니다. 고정 레이아웃(뷰포트를 기준으로 한 애니메이션)을 사용하여 다른 방향의 변경을 제어합니다(포물선 효과를 갖도록 두 레이어 작성)

이벤트 방출 및 수신

구성 요소 간 값 전달 -1

구성 요소 간 값 전달 -2

Extended

Vue1.0 구성 요소

  1. $on()을 사용하여 이벤트를 수신합니다.

  2. $emit()을 사용하여 이벤트를 트리거합니다. 이벤트를 전달하고 이벤트는 상위 체인을 따라 버블링됩니다.

  3. $broadcast()를 사용하여 이벤트를 브로드캐스팅하면 이벤트가 모든 하위 항목으로 전파됩니다.

  4. (1) Vue2.0 구성 요소 간 데이터 전송

    1-1. 장바구니 컨트롤 컴포넌트에서 클릭하면 $emit 속성을 통해 이벤트가 전달되고, 클릭된 객체가 전달됩니다.
  5. 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);
    }
    로그인 후 복사
1-2.장바구니가 있는 경우. 구성 요소는 addCart 이벤트를 제출하고 추가 기능을 호출합니다

 <cart-control :foodsele=&#39;food&#39; @add="addFood"></cart-control>
로그인 후 복사
상위 구성 요소는 @add=" addFood"를 사용합니다. 하위 구성 요소 vm.$emit에 의해 트리거된 이벤트를 수신하고, addFood()를 통해 하위 구성 요소에서 전달된 데이터를 받아들입니다. , 데이터가 변경되었음을 상위 구성 요소에 알립니다.

addFood(target) {
  this._drop(target);
}
로그인 후 복사

1-3. 父组件访问子组件 vue 提供了接口 ref

复制代码 代码如下:


_drop(target) {
  // 体验优化,异步执行下落动画
  this.$nextTick(() => {
   this.$refs.shopCart.balldrop(target);// 将target传入shopCart子组件中的balldrop方法,所以drop方法能获得用户点击按钮的元素,即能获取点击按钮的位置
  });
}
로그인 후 복사

区别 访问DOM 变量

1-3. 操作 shopCart 组件

data (){ // 定义一个数组 来 控制小球的状态  定义多个对象,表示页面中做多同时运动的小球
 return{ // 定义 5 个 小球  
 balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
 dropBalls:[] // 接收下落小球
  }
}
로그인 후 복사
methods:{
 balldrop(ele) {
// console.log(el) 取到点击 对象
   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;
    }
   }        
 }
}
로그인 후 복사

动画过程开始,利用vue 提供的钩子函数

beforeEnter (el){ //找到所以设为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  // 点击的按钮与小球(fixed)之间x方向的差值
  let y=-(window.innerHeight-pos.top-22)
  el.style.display = &#39;&#39;;  //设置初始位置前,手动置空,覆盖之前的display:none,使其显示
       el.style.webkitTransform = `translate3d(0,${y}px,0)`; //外层元素做纵向的动画,y是变量
       el.style.transform = `translate3d(0,${y}px,0)`;
       let inner = el.getElementsByClassName(&#39;inner_hook&#39;)[0];//内层元素做横向动画,inner-hook(用于js选择的样式名加上-hook,表明只是用                                   //于js选择的,没有真实的样式含义)
       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(() => {//异步执行
   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(); //取到做完动画的球,再置为false,即重置,它还可以接着被利用
  if (ball) {
   ball.show = false;
   el.style.display = 'none';
  }
 }
로그인 후 복사
<p class="ball-container">
  <p v-for="ball in balls">
   <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <p class="ball" v-show="ball.show">
     <p class="inner inner_hook"></p>
    </p>
   </transition>
  </p>
</p>
로그인 후 복사
&.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
로그인 후 복사

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

微信小程序开发图片压缩功能

js动态操作表格

JS中Object对象的原型的使用方法

위 내용은 Vue의 shopCart 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿