注：組件中使用到的icon為svg通過icomoon.io轉換而來的css icon，實際使用需要換成你的icon

使用例子如下：

<li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px"><div class="icon"><img width="57" height="57" :src="food.icon"></div><div class="content"><h2 class="name">{{food.name}}</h2><div class="extra"><p class="desc">{{food.description}}</p><span class="count">月售{{food.sellCount}}份</span><span>好評率{{food.rating}}%</span></div><div class="price"><span class="now">￥{{food.price}}</span><span class="old" v-if="food.oldPrice">{{food.oldPrice}}</span></div><div class="cartcontrol-wrapper"><cartcontrol :food="food"></cartcontrol></div></div></li>

其中，調用控制按鈕組件的代碼為：

<div class="cartcontrol-wrapper"><cartcontrol :food="food"></cartcontrol></div>

例子運行效果，箭頭處為控制按鈕組件：

以下為組件代碼

template：

icon-remove_circle_outline 為減號icon對應的類，為svg通過icomoon.io生成。icon-add_circle為加號icon對應的類

<template><div class="cartcontrol"><transition name="move"><div class="cart-decrease" v-if="food.count>0"@click.stop.prevent="decreaseFood"><span class="inner icon-remove_circle_outline"></span></div></transition><div class="cart-count" v-if="food.count>0">{{this.food.count}}</div><div class="cart-add icon-add_circle" @click.stop.prevent="addFood"></div></div> </template>

JavaScript：

<script type="text/ecmascript-6">import Vue from 'vue';export default {props: {food: {type: Object}},methods: {addFood(event) {if (!event._constructed) {return;}if (!this.food.count) {Vue.set(this.food, 'count', 1);} else {this.food.count++;}},decreaseFood(event) {if (!event._constructed) {return;}if (this.food.count) {this.food.count--;}}}}; </script>
stylus：（功能類似于sass、less）

<style lang="stylus" rel="stylus/stylesheet">.cartcontrolfont-size 0.cart-decreasedisplay inline-blockpadding 6pxtransition all 0.4s linear&.move-enter-active,&.move-leaveopacity 1transform translate3D(0,0,0).innerdisplay blockfont-size 24pxline-height 24pxcolor rgb(0, 160, 220)transition all 0.4s lineartransform rotate(0)&.move-enter,&.move-leave-activeopacity 0transform translate3D(24px,0,0).innertransform rotate(180deg).cart-adddisplay inline-blockpadding 6pxfont-size 24pxline-height 24pxcolor rgb(0, 160, 220).cart-countdisplay inline-blockvertical-align topwidth 12pxpadding-top 6pxline-height 24pxtext-align centerfont-size 10pxcolor rgb(147, 153, 159)</style>

總結

以上是生活随笔為你收集整理的vue2.0+stylus实现商品增加减少控制按钮组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。