vue2.0+stylus实现商品增加减少控制按钮组件

注：组件中使用到的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实现商品增加减少控制按钮组件相关推荐

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...
Vue2.0饿了吗的实践-header组件的实践
header组件的实现图: header组件的代码: html: <template> <div class="header"> <div class ...
Vue2.0王者荣耀助手
vue-gok vue2.0-王者荣耀助手项目使用的是带玩游戏平台提供的API,由于腾讯公司王者荣耀游戏关闭了查看其它人的战绩功能,带玩平台受其影响,已将API暂时关闭,所以无法获得稳定的 DAIW ...
vue2.0仿饿了么webAPP项目
# webapp vue2.x仿饿了么app项目总结项目地址:https://github.com/harrietjia/vue2-webapp.git 如果觉得有帮助,希望可以在右上角给我个sta ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
Vue2.0面试题集合
Vue2.0面试题集合 1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获 ...

vue2.0+stylus实现商品增加减少控制按钮组件

vue2.0+stylus实现商品增加减少控制按钮组件相关推荐

最新文章

热门文章