├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public └── favicon.ico └── src ├── App.vue ├── assets ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg └── logo.png ├── components ├── FlyCard.vue └── HelloWorld.vue ├── index.css ├── main.js ├── use └── touch.js └── views ├── demo-tantan.vue └── demo-zhihu.vue /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 备战2021，仿探探拖拽卡片效果Vue3实现 2 | 3 | 大帅刚做了一版类似`探探`的`飞卡`效果组件，十分炫酷！ 4 | 5 | 只可惜不是vue3版本，下面带大家看看如何正确搬运到vue3中。 6 | 7 | `绝对抄袭，如有不同，纯属巧合`😁 8 | 9 | 10 | ![Dec-18-2020 11-07-03](https://gitee.com/57code/picgo/raw/master/Dec-18-2020%2011-07-03.gif) 11 | 12 | 13 | 14 | ### 飞卡原理 15 | 16 | 核心点有三：`卡片堆叠布局`、`拖动卡片`和`飞卡` 17 | 18 | 布局主要利用`z-index`和`absolute`定位； 19 | 20 | 拖动主要利用几个touch事件：`touchstart`,`touchmove`,`touchcancel`,`touchend`； 21 | 22 | 飞卡主要利用`勾股定理`😁 23 | 24 | 详情参见[原文](https://juejin.cn/post/6906143905922678797)，不再赘述。 25 | 26 | 27 | 28 | ### 组件化 29 | 30 | 这里抽取组件是核心，先看看`FlyCard`组件template中的结构： 31 | 32 | ```html 33 |
34 |
35 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 |
52 | ``` 53 | 54 | > 注意这里省略了所有样式，替换所有`view`为`div`，每张卡片预留了`具名插槽`方便外界传入内容进来。 55 | > 56 | > 只有卡片1需要监听事件，最后预留一张空卡等待“上位”😁 57 | 58 | 59 | 60 | 那么，使用`FlyCard`组件时，需要使用`v-slot`指令分发内容，来看看`demo-tantan.vue` 61 | 62 | ```html 63 | 64 | 69 | 70 | 71 | ``` 72 | 73 | > 这里的`