Detaillierte Erläuterung der Entwicklungsbeispiele für Vue shopCart-Komponenten

Dieser Artikel stellt Ihnen hauptsächlich die detaillierte Erklärung der Vue shopCart-Komponentenentwicklung vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. shopCart-Komponente

(1) Waren-Mutterkomponente und Unterkomponente shopCart-Übergabeparameter

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

Die Daten von Lieferpreis und Mindestpreis werden vom Verkäuferobjekt in data.json-Daten abgerufen. Daher müssen die Daten des Verkäuferobjekts in der Warenkomponente abgerufen werden, andernfalls wird ein Fehler gemeldet:

[Vue warn]: Fehler beim Rendern: „TypeError: Cannot read property ‚deliveryPrice‘ von undefiniert"

Lösung: Die Router-View-Komponente in der Root-Komponente App.vue erhält die Verkäuferdaten und übergibt sie an die Warenkomponente

1-1.app.vue (Die Stammkomponente ist auch die übergeordnete Komponente von Waren) )

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

Hinweis: sellerObj ist das durch Daten definierte Objekt und wird zum Empfangen von data.json-Daten verwendet. Dies entspricht den tatsächlichen Parametern

1-2 >

1-3.shopCart.vue (Unterkomponente von Waren)

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

(2) Auswählen die Berechnungsfunktion des Produkts

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

1-1. Geben Sie die vom Benutzer ausgewählte Sammlung von Produkten ein.

Beschreibung: Eine Reihe von vom Benutzer ausgewählten Produkten wird von der übergeordneten Komponente übergeben . Das Array speichert n Objekte und jedes Objekt speichert den Preis und die Menge des Produkts.

1-2 Verwenden Sie berechnete Attribute, um Änderungen der Produktmenge, des Gesamtproduktpreises, der dynamischen Änderung von Beschreibungen und anderer Funktionen auszuwählen

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

Auf diese Weise wird es in die Vorlage gerendert

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

Verwandte Stile

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

Zusammenfassung: Durch das obige Lernen können wir feststellen, dass Änderungen in selectFoods() eine Schlüsselrolle spielen und Änderungen im DOM verursachen und sich schließlich in der Schnittstelle widerspiegeln, und das tun wir auch Sie müssen nicht auf die spezifische Implementierung im DOM achten. Dies ist einer der großen Vorteile von Vue. Es wäre etwas kompliziert, diese Funktionen mit jQuery auszuführen.

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

2. CartControl-Komponente

Beschreibung: Diese Komponente steuert den Warenkorbball. Dabei handelt es sich um die Animation des Balls.

(1) Neue Attributanzahl

Beschreibung:

Fügen Sie den Lebensmitteln unter Waren eine Attributanzahl hinzu, um die vom Benutzer ausgewählten Artikel zu speichern der Produkte, Berechnung des Gesamtpreises des Produkts und Änderungen der zugehörigen Abzeichen (Anzeige der Anzahl der vom Benutzer ausgewählten Produkte)

Methode: Vue aus „vue“ importieren; die festgelegte Schnittstelle verwenden und Attribute hinzufügen Durch vue.set() kann es erkannt werden, wenn es sich ändert, sodass die übergeordnete Komponente den Zählwert erhalten kann (der beim Durchlaufen der ausgewählten Produkte verwendet wird)

(2) Schaltfläche „Hinzufügen“ Übergang realisieren

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

Der Effekt, den wir erzielen möchten, ist: Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird die Schaltfläche angezeigt und einige Animationseffekte werden von Rotations-, Übersetzungs- und Transparenzänderungen begleitet

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

3. Parabolische Ballanimation

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

Steuern Sie den Ball durch zwei Schichten und Die äußere Ebene steuert eine Richtung. Die innere Ebene steuert die Änderung in die andere Richtung (schreiben Sie zwei Ebenen, um einen Parabeleffekt zu erzielen), wobei ein festes Layout (Animation relativ zum Ansichtsfenster) verwendet wird.

Ereignisemission und -empfang

Wertübertragung zwischen Komponenten-1

Wertübertragung zwischen Komponenten-2

Erweiterung

Vue1.0-Übertragung zwischen Komponenten

Verwenden Sie $on(), um auf Ereignisse zu warten.

1. Verwenden Sie $emit(), um Ereignisse darauf auszulösen
Verwenden Sie $dispatch(), um Ereignisse zu versenden, und Ereignisse sprudeln entlang der übergeordneten Kette nach oben.
Verwenden Sie $broadcast(), um Ereignisse zu übertragen, und Ereignisse werden nach unten an alle Nachkommen weitergegeben
(1) Daten zwischen Vue2.0-Komponenten übertragen

4. 1-1 Wenn Sie auf klicken, um die Menge hinzuzufügen, lösen Sie ein Ereignis über das Attribut $emit aus addCount-Methode in der CartControl-Komponente, übergeben Sie das angeklickte Objekt

1-2. Betreiben Sie die Warenkomponente

Wenn die Warenkorbkomponente übermittelt wird Beim addCart-Ereignis ruft es die Add-Funktion auf

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);
}

Die übergeordnete Komponente verwendet @add="addFood", um auf Ereignisse zu hören, die von der untergeordneten Komponente vm.$emit ausgelöst werden , akzeptiert die von der untergeordneten Komponente über addFood() übergebenen Daten und benachrichtigt die übergeordnete Komponente, dass sich die Daten geändert haben.

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

1-3. Die übergeordnete Komponente greift auf die untergeordnete Komponente vue zu und stellt die Schnittstellenreferenz bereit.

Code kopieren

Der Code lautet wie folgt:

addFood(target) {
  this._drop(target);
}

Differenzialer Zugriff auf DOM-Variablen

1-3 Komponente

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

Der Animationsprozess startet unter Verwendung der von vue bereitgestellten Hook-Funktion

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

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 = '';  //设置初始位置前，手动置空，覆盖之前的display：none，使其显示
       el.style.webkitTransform = `translate3d(0,${y}px,0)`; //外层元素做纵向的动画，y是变量
       el.style.transform = `translate3d(0,${y}px,0)`;
       let inner = el.getElementsByClassName('inner_hook')[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';
  }
 }

Verwandte Empfehlungen:

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

Beispielcode für die Entwicklung von Vue-Header-Komponenten

Detaillierte Erläuterung der Vue-Komponenten und der Datenübertragung

vuejs verwendet rekursive Komponenten zur Implementierung Baumverzeichnisse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Entwicklungsbeispiele für Vue shopCart-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!