ホームページ > 記事 > ウェブフロントエンド > VueのshopCartコンポーネントの使い方
VueのshopCartコンポーネントの使い方
- php中世界最好的语言オリジナル
- 2018-03-23 10:46:271983ブラウズ
今回は 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データ内のsellerオブジェクトから取得します。したがって、販売者オブジェクトのデータは商品コンポーネントで取得する必要があります。取得しないと、エラーが報告されます:
[Vue warn]: レンダリング時のエラー: "TypeError: Cannot read property 'deliveryPrice' of unknown"解決策: ルート コンポーネント App.vue のルータービュー コンポーネントは販売者のデータを取得し、それを商品コンポーネント
1-1.app.vue (ルート コンポーネントは商品の親コンポーネントでもあります) に渡します
<keep-alive> <router-view :sell="sellerObj"></router-view> </keep-alive>
注: sellObjは、実際のパラメータ
1-2.goods.vue（コンポーネントのサブコンポーネントとshopCartの親コンポーネントに関連）に相当するdata.jsonデータで定義されたオブジェクト内のデータを受信するために使用されます
間の通信props 属性によるコンポーネント
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="{'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>
関連スタイル
&.active color white &.enough background #00b43c color white
概要:上記の学習を通じて、selectFoods() の変更が重要な役割を果たし、その変更が DOM の変更を引き起こし、最終的には内部の特定の実装に注意を払う必要がないことがわかります。 DOM これは vue の大きな利点です。 jQuery を使用してこれらの機能を実行するのは少し複雑になります。
2. CartControl コンポーネント説明: このコンポーネントはショッピング カート ボールを制御します。ボールのアニメーションが含まれます
(1) 属性カウントを追加します
手順:
商品の下の食品に属性カウントを追加して、ユーザーが選択した商品の数を保存し、商品と関連する商品の合計価格を計算しますバッジ ( ユーザーが選択した製品の数の変化を表示します
方法: 'vue' から Vue をインポート; set インターフェイスを使用し、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='move'> <!--平移动画--> <p class="cart-decrease" v-show="foodsele.count" @click='decreaseCart($event)'> <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. 放物線ボール アニメーション
は 2 つのレイヤーを通じてボールを制御し、内側のレイヤーは一方向の変化を制御します。他の方向 (放物線効果を持たせるために 2 つのレイヤーを作成)、固定レイアウト (ビューポートを基準としたアニメーション) を使用します
イベントの発行と受信
コンポーネント間で受け渡される値 -1
コンポーネント間で受け渡される値 -2
拡張Vue1.0 コンポーネント
- $on() を使用してイベントをリッスンします。
- $emit() を使用してイベントをトリガーします。
- $dispatch() を使用してイベントをディスパッチします。イベントは親チェーンに沿ってバブルします
- $broadcast() を使用してイベントをブロードキャストすると、イベントは下位のすべての子孫に伝播されます
- (1) Vue2.0 コンポーネント間でデータを転送します
1-1クリックして数量を追加すると、cartControl コンポーネントで addCount メソッドが $emit 属性を通じてイベントを送出し、クリックされたオブジェクトを渡します
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='food' @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 = ''; //设置初始位置前，手动置空，覆盖之前的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';
}
}
<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中文网其它相关文章！
推荐阅读：
以上がVueのshopCartコンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。