recherche

Maison  >  Article  >  interface Web  >  Comment utiliser le composant shopCart de Vue

Comment utiliser le composant shopCart de Vue

php中世界最好的语言
php中世界最好的语言original
2018-03-23 10:46:271999parcourir

Cette fois, je vais vous expliquer comment utiliser le composant shopCart de Vue. Quelles sont les précautions lors de l'utilisation du composant shopCart de Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Composant shopCart

(1) le composant parent de marchandises et le sous-composant shopCart passent les paramètres 

deliveryPrice:{ // 单价 从json seller 对象数据中获取
 type:Number,
 default:0
},
minPrice:{ // 最低起送价 从json seller 对象数据中获取
 type:Number,
 default:20
}

où les données de deliveryPrice et minPrice sont tous deux obtenus à partir de l'objet vendeur dans les données data.json. Par conséquent, les données de l'objet vendeur doivent être obtenues dans le composant marchandises, sinon une erreur sera signalée :

[Vue warn] : Erreur de rendu : "TypeError : Impossible de lire la propriété 'deliveryPrice' of undefined"

Solution : Le composant router-view dans le composant racine App.vue obtient les données du vendeur et les transmet au composant marchandises

1-1.app.vue (le composant racine est également le composant parent des marchandises) )

<keep-alive>
 <router-view :sell="sellerObj"></router-view>
</keep-alive>

Remarque : sellerObj est utilisé pour recevoir des données data.json dans l'objet défini par data, ce qui est équivalent au paramètre réel

1-2.goods.vue (par rapport au composant) Sous-composant et composant parent de shopCart)

Communication entre les composants via les attributs props

props: {
  sell: Object // 相当于 形参
 },

1-3.shopCart .vue (sous-composant des marchandises)

<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>

(2) Fonction de calcul des produits sélectionnés

1-1 Passer dans la collection de produits sélectionnés par l'utilisateur

Description : Un tableau de produits sélectionnés par l'utilisateur sera transmis à partir du composant parent. Il y aura n objets stockés dans le tableau, et chaque objet stocke le prix et la quantité du produit. 

props:{       // 通过父组件传过来的 ( 相当于形参 )
 selefoodsArr:{   // 用户选中的商品存放在一个数组里  接收的是 data.json数据的 goods（数组）
 type:Array, // 当父组件传过来的 类型是对象或者 是数组时， default 就是一个函数
 default (){
 return []  // 返回数组 存放着选中 商品 对应的 goods下的 foods 数组（由 父组件 的 实参 决定的返回值）
 }
}

1-2. Utilisez les attributs calculés pour sélectionner les modifications de la quantité de produit, du prix total du produit, modifier dynamiquement les descriptions et d'autres fonctions 

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 '去结算'
    }
 }  
}

Cela sera rendu dans le modèle

<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>

Styles associés

&.active
  color white
  
&.enough
  background #00b43c
  color white

Résumé : Grâce à l'apprentissage ci-dessus, nous pouvons constater que les changements dans selectFoods() jouent un rôle clé. Ses changements entraîneront des changements dans le DOM, et sera finalement reflété dans l'interface, et nous n'avons pas besoin de prêter attention à l'implémentation spécifique à l'intérieur du DOM. C'est un avantage majeur de vue. Ce serait un peu compliqué d'utiliser jQuery pour compléter ces fonctions.

2. Composant cartControl

Description : Ce composant contrôle la boule du panier. Cela implique l'animation de la balle

(1) Nouveau nombre d'attributs

Description :

Ajouter un nombre d'attributs aux aliments sous les marchandises pour stocker les articles sélectionnés par l'utilisateur Numéro des produits, calcul du prix total du produit, et évolution des badges associés (affichage du nombre de produits sélectionnés par l'utilisateur)

Méthode : importer Vue depuis 'vue' utiliser l'interface définie et ajouter des attributs ; via vue.set() , il peut être détecté lorsqu'il change, afin que le composant parent puisse obtenir la valeur de comptage (utilisée lors du parcours des produits sélectionnés) 

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) Ajouter un bouton pour implémenter transition

L'effet que nous souhaitons obtenir est le suivant : lorsque l'on clique sur le bouton d'ajout, réduire l'apparence du bouton et certains effets d'animation accompagnés de changements de rotation, de translation et de transparence 

<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. Animation de balle parabolique

La balle est contrôlée à travers deux couches. La couche externe contrôle le changement dans une direction et la couche interne contrôle le changement dans l'autre direction (écrivez deux couches. pour avoir un effet parabole), en utilisant une disposition fixe (C'est une animation relative à la fenêtre)

Émission et réception d'événements

Passer des valeurs entre les composants-1

Passer des valeurs entre les composants-2

Extensions

Transfert entre les composants Vue1.0

  1. Utiliser $on( ) pour écouter les événements

  2. Utilisez $emit() pour déclencher des événements dessus

  3. Utilisez $dispatch() pour distribuer des événements, qui bouillonnent le long de la chaîne parent ;

  4. Utilisez $broadcast() pour diffuser des événements, et les événements sont transmis à tous les descendants

(1) Transmission de données entre les composants Vue2.0

1-1 . Lorsque vous cliquez pour ajouter la quantité, envoyez un événement via l'attribut $emit dans la méthode addCount dans le composant cartControl et transmettez le clic. objet 

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. Faire fonctionner le composant marchandises

pour faire du shopping Si le composant voiture soumet l'événement addCart, il appelle la fonction d'ajout 

 <cart-control :foodsele=&#39;food&#39; @add="addFood"></cart-control>

Le Le composant parent utilise @add="addFood" pour écouter l'événement déclenché par le composant enfant vm.$emit et accepte l'événement transmis par le composant enfant via addFood(). Les données informent le composant parent que les données ont changé. 

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对象的原型的使用方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation de jquery pour créer des images de carrousel sur PCArticle suivant：Explication détaillée de l'utilisation de jquery pour créer des images de carrousel sur PC

Articles Liés

Voir plus