vue2-elm学习记录(Day11)

问题记录:

(1)

报错信息:

"(Emitted value instead of an instance of Error) <transition v-for="item in showMoveDot">: component lists rendered with v-for should have explicit keys."

意思是:在<transition>子元素上用v-for呈现的组件列表应该具有显式键。

修改:添加一个key

(2)

nextTick:nextTick涉及到vue中DOM的异步更新。

应用场景:

1>在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

2>在数据变化前后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进vue.nextTick()的回调函数中。

效果实现:

飞入购物车效果

<section class="food_container" v-show="changeShowType=='food'">
    ...
    <!--底部加入购物车部分 s-->
    <section class="buy_cart_container">
        
        <!--(1)处加入购物车部分的代码-->
         <!--点击购物车展开加入购物车的商品详情 s-->
        <transition name="toggle-cart">
            <!--(2)处的代码-->
        </transition>
        <!--点击购物车展开加入购物车的商品详情 e-->
        <!--遮罩层 s showCartList显示购物车列表,默认值是false
        cartFoodList已加入购物车的商品列表,默认值是[]-->
            <transition name="fade" v-show="showCartList&&cartFoodList.length" @click="toggleCartList">   
            </transition>
        <!--遮罩层 e-->
    </section>
    <!--底部加入购物车部分 e-->
</section>

为方便查看结构,将代码进行分离

(1)处代码如下:

<!--左侧:图标及商品个数 toggleCartList控制购物车商品列表以及遮罩层的显示和隐藏-->
    <section class="cart_icon_num" @click="toggleCartList">
        <!--cart_icon_activity>0时,红色标识出商品数量-->
        <div class="cart_icon_container" :class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}">
            <!--totalNum是已加入的商品数-->
            <span  class="cart_list_length">
                  {{totalNum}}
            </span>
            <!--绘制购物车图标-->
            <svg class="cart_icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>
            </svg>
        </div>
        <!--配送费-->
        <div class="cart_num">
            <!--totalPrice已选商品总价-->
            <div>¥{{totalPrice}}</div>
            <div>配送费¥{{deliveryFee}}</div>
        </div>
    </section>
    <!--右侧:去付款。minimumOrderAmount=最低起送价-总价格-->
    <section class="gotopay" :class="{gotopay_acitvity:minimumOrderAmount<=0}">
        <!--总价格<最低起送价的情况-->
        <span class="gotopay_button_style" v-if="minimumOrderAmount > 0">
            还差¥{{minimumOrderAmount}}起送
        </span>
        <!--总价格>最低起送价的情况,点击跳转到确认订单页面-->
         <router-link :to="{path:'/confirmOrder', query:{geohash, shopId}}"
                class="gotopay_button_style" v-else>
                去结算
         </router-link>
    </section>

(2)处的代码如下:

<section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
        <!--header s-->
         <header>
            <h4>购物车</h4>
            <!--点击清空购物车-->
            <div @click="clearCart">
                 <svg>
                   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"
                   </use>
                  </svg>
                  <span class="clear_cart">清空</span>
             </div>
          </header>
        <!--header e-->
        <!--已加入购物车中的食物 s-->
        <section class="cart_food_details" id="cartFood">
            <ul>
                <!--cartFoodList加入购物车的商品列表-->
                <li v-for="(item,index) in cartFoodList" :key="index" class="cart_food_li">
                    <div class="cart_list_num">
                        <p class="ellipsis">{{item.name}}</p>
                        <p class="ellipsis">{{item.specs}}</p>
                    </div>
                    <div class="cart_list_price">
                        <span>¥</span>
                        <span>{{item.price}}</span>
                    </div>
                    <!--增加数量的图标 s-->
                    <section class="cart_list_control">
                        <!--减号-->
                     <span @click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                       <svg>
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                       </svg>
                     </span>
                     <!--个数-->
                     <span class="cart_num">{{item.num}}</span>
                     <!--加号-->
                     <svg class="cart_add" @click="addToCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                     </svg>
                    </section>
                    <!--增加数量的图标 e-->
                </li>
            </ul>
        </section>
        <!--已加入购物车中的食物 e-->
    </section>

说明:

(1)遮罩层的显示

遮罩层显示条件,购物车商品列表cartFoodList不为空且showCartList(显示购物车列表)的值为true

toggleCartList方法,控制遮罩层的显示和隐藏以及购物车商品列表的显示和隐藏。

cartFoodList的数据格式如下:

(2)minimumOrderAmount:还差多少元起送。值为最低起送价减去价格。

(3)clearCart方法执行清空购物车的操作。

(4)

removeOutCart:移除一个商品

addToCart:向购物车中添加一个商品

removeOutCart(category_id, item_id, food_id, name, price, specs)

传入的参数:

category_id-食品分类id
       item_id-食品id
       food_id-食品规格id
       name-食品名字
       price-食品价格
       specs-食品规格

addToCart需要传入的参数同上。

参照项目地址: 地址

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章