[TOC]
#### 小球飞入购物车组件
* [ ] 点击添加商品,发布事件,将当前dom派发给父组件
![](https://box.kancloud.cn/47d570cc8797552120b0fe9c3b42892f_376x536.png)
~~~
methods: {
plus(event) {
if (!this.food.count) {
this.$set(this.food, 'count', 1)
} else {
this.food.count++
}
// 派发事件,当前dom派发给父组件
this.$emit('add', event.target)
},
~~~
*****
* [ ] 父组件监听,调用底部组件事件,传入子组件派发的Dom元素
![](https://box.kancloud.cn/9692f9bb0cf9060d9ffade0ea612ba3b_752x342.png)
![](https://box.kancloud.cn/4abf10d709a7af865ee69828f6f236d3_444x277.png)
*****
* [ ] ShopCart 组件创建小球
![](https://box.kancloud.cn/e7dc41c10838ea0f4b793c6a1b6c5eaa_424x491.png)
![](https://box.kancloud.cn/cf6a9d0c2312ae9eabf0080579a18e77_314x239.png)
![](https://box.kancloud.cn/a19c9404a5498f468ca487ec34840a8c_639x476.png)
![](https://box.kancloud.cn/7b46777f4a6345a1ac0b42349fe1e0f8_671x371.png)
![](https://box.kancloud.cn/beea2f187a90c6072430710d2c8f3c6f_396x261.png)
![](https://box.kancloud.cn/efe98e39cda3d634d7376d2732070690_437x460.png)
![](https://box.kancloud.cn/7257d65dbbe6c877b19e1e8f754ed5c0_684x495.png)
![](https://box.kancloud.cn/1dbc9c65b05deb1bdf60ab40f191ccd0_696x390.png)
![](https://box.kancloud.cn/34701bdd9b5fd3a27e19a64f8684b852_402x315.png)
*****
至此,小球飞入购物车动画就完成了
- 起步
- 环境搭建
- mock数据
- 基础
- 生命周期
- 过滤器
- 过渡动画
- keyframes动画
- 动画JS钩子
- 路由
- 导航守卫
- 全局守卫
- 监听器
- 自定义组件
- 获取焦点
- mixins
- mixins抽离vuex
- 国际化
- 动态组件
- Dom
- 扩展
- 安装devTools
- scss
- Nuxt引用多个UI库
- vuex
- vuex命名空间
- vuex定义
- cli
- 安装与卸载
- 环境变量
- 杂项
- Mock数据
- FeHelper
- git
- 反向代理
- 本地存储
- stylus
- 常用mixins
- jsonp
- 配置
- mock配置
- 跨域配置
- 自定义路径
- px2rem
- 代理后端请求
- 常用算法
- 字母排序城市数据
- 倒计时
- 通讯录数据结构
- 请求
- axios防止多次请求
- 封装axios请求
- axios使用
- 封装axios
- 插件
- BetterScroll
- 高德定位
- polyfill
- fastClick
- LazyLoad
- storageCache
- moment
- keyFrameAnimation
- vueSwiper
- 组件
- Loading组件
- header组件
- 仿有道App导航
- SupportIcon
- 仿饿了么购物车跳动
- 购物车小球缓动
- 小球飞入购物车
- 仿音乐歌手列表
- 唱片飞入效果
- 搜索组件
- 仿美团PC搜索框
- 页面布局
- stickyFooter
- 背景色渐变
- 背景虚化
- Ui组件
- CubeUi
- CreateApi
- tab滑屏切换
- 索引列表
- BScroll
- BScroll左右联动导航
- vant
- 函数库
- 常用Dom函数库
- axios封装
- 格式化音乐播放时长
- 搜索节流
- time格式化
- JS基础
- window对象中的高度
- JS中的宽高
- 常用正则
- nuxt
- nuxtVuex
- 监听页面滚动
- 监听body滚动
- 监听局部滚动